Селекторы потомков
Авторам может понадобиться, чтобы селекторы совпадали с элементом, который является потомком другого элемента в дереве документа (например, "Совпадать с теми элементами 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]
