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

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

Авторам может понадобиться, чтобы селекторы совпадали с элементом, который является потомком другого элемента в дереве документа (например, "Совпадать с теми элементами EM, которые содержаться в элементе H1"). Селекторы потомков выражают следующие взаимоотношения в патэрн. Селектор потомков состоит из двух или более селекторов, разделённых пробелами. Селектор потомков "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]

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

---