Верстка макета. Вложенные HTML элементы и вложенные CSS селекторы.

Помощь проекту:
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, а не элементы с классом all внутри div.