5.5. Наследующие селекторы.

Авторы могут захотеть, чтобы селекторы согласовались с элементом, который является наследником другого элемента в дереве документа (например, "Согласуйте те элементы ЕМ, которые содержаться в элементе Н1"). Наследующие селекторы выражают такую связь в комбинации. Наследующие селекторы состоят из двух или более селекторов, разделенных пробелом. Наследующий селектор формы "А В" согласуется, когда элемент В является случайным наследником такого элемента предка А.

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

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

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

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

Используя этот случай, мы добавляем к предыдущим правилам новую декларацию, которая установит цвет текста голубым, если ЕМ находится внутри Н1:

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

Третье правило будет согласовано с ЕМ в следующем фрагменте:

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

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

DIV * P 

согласуется с элементом Р, который является внучатым элементом или последним наследником элемента DIV. Обратите внимание на пробел с обеих сторон "*".

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

DIV P *[href]