Спецификация CSS2

       

Селекторы потомков


Авторам может понадобиться, чтобы селекторы совпадали с элементом, который является потомком другого элемента в дереве документа (например, "Совпадать с теми элементами EM, которые содержатся в элементе H1"). Cелекторы потомков выражают следующие взаимоотношения в патэрн. Селектор потомков состоит из двух или более селекторов, разделённых пробелами. Селектор потомков "A B" совпадает, если элемент B является произвольным потомком некоторого элемента-предка A.

Рассмотрим следующие правила:

H1 { color: red } EM { color: red }

Хотя смысл этих правил в том, чтобы выделять текст путём изменения его цвета, в следующем случае эффект не будет достигнут:

<H1>This headline is <EM>very</EM> important</H1>

В этом случае мы дополняем предыдущие правила правилом, которое устанавливает голубой цвет текста, если EM появляется где-либо внутри H1:

H1 { color: red } EM { color: red } H1 EM { color: blue }

Третье правило совпадёт с элементом EM в следующем фрагменте:

<H1>This <SPAN class="myclass">headline is <EM>very</EM> important</SPAN></H1>

Следующий селектор:

DIV * P

совпадает с элементом P, который является внуком, или позднейшим потомком, элемента DIV.

Обратите внимание на пробелы с каждой стороны от "*".

Селектор в следующем правиле, сочетающий селекторы потомка и атрибута, совпадает с любым элементом, имеющим (1) установленный атрибут "href" и (2) находящимся внутри P, который сам находится внутри DIV:

DIV P *[href]



Содержание раздела