Верстка макета. Вложенные HTML элементы и вложенные CSS селекторы.
Тематическая группа (веб-дизайн): https://vk.com/zametkipohtml
Официальный паблик в ВК: https://vk.com/zametkinapolyah
Рубрика по теме в блоге: http://zametkinapolyah.ru/verstka-sajtov
Не забудь подписаться и нажать палец вверх: https://www.youtube.com/user/zametkin…
Помощь проекту:
WMR: R288272666982
WMZ: Z293550531456
Яндекс.Деньги: 410011531129223
Мы знаем, что язык HTML иерархичен: один элемент может находиться внутри другого, а внутри второго может быть третий и так далее. Внешний элемент принято называть родительским, а внутренний – дочерним. В CSS нет как таковых вложений и вложенных селекторов, а сам CSS не является иерархичным языком, но CSS позволяет взаимодействовать с браузером и указывать браузеру на иерархию элементов.
Если показать этот код в графическом виде, то мы получим дерево, корнем которого является контейнер html. У html два потомка: head и body. А вот потомки у head и body – свои. Например, чтобы нам дойти до элемента списка нам нужно проделать следующий путь html-body-div-ul-li. А для элемента title так: html-head-title. HTML элементы, находящиеся на одном уровне и имеющие одного родителя, называют братьями или родственными элементами. CSS код работает с теми элементами, которые видит посетитель, то есть с теми, которые находятся в контейнере body, поэтому, чтобы воспользоваться вложенными селекторами вам не обязательно указывать в пути html и body:
p a{ color: #330000; text-decoration: none; }
Этот код будет применен только к элементам a, находящимся в контейнере p. Причем к любым ссылкам, находящимся внутри любого абзаца. Вложенные селекторы можно спокойно группировать, они подчиняются тем же правилам, что и обычные селекторы. Вложенные селекторы могут содержать имена классов и идентификаторов и т.д., вложенность, в принципе, может быть любой.
div.all{ background-color:red;}
Этот селектор позволяет отобрать все элементы div с классом all, а не элементы с классом all внутри div.
Кирилл Антонов
Канал для начинающего веб-разработчика. Здесь ты найдешь различные видео уроки о технологиях и программном обеспечение, которые используют веб-разработчики.
Последние сообщения
127 полезных и бесплатных онлайн академий
23.04.2019
