Выбор потомков

Селектор выбора потомка состоит из двух или более разделенных пробелами простых селекторов. Каждый комбинатор-пробел, если читать справа налево, трактуется как «находящийся в», «который представляет собой часть» или «является потомком». Например, селектор div h2 в следующем правиле:

div h2 {color: green;}

означает, что для любого заголовка h2, являющегося потомком раздела div, будет применен зеленый цвет в качестве основного цвета. Другой пример селектора выбора потомка:

article.copy h1 em {color: red}

Это правило будет применено к каждой комбинации тегов на HTML-странице, подобной следующей:

<article class=”copy”> … <h1> … <em>Красный заголовок </em> … </h1>

…

</article>

Селекторы выбора потомков являются сильным средством, делающим возможным то, что практически нельзя сделать только средствами языка HTML.

Выбор дочерних элементов

В некоторых случаях необходимо сузить диапазон выбора до дочернего элемента. Для этого как раз и служит комбинатор-больше (>), например:

div > h2 {color: green;}

Комбинатор-больше, если читать справа налево, в этом примере трактуется как «выбираем любой элемент h2, являющийся дочерним элементом div». Пример более сложного правила:

article.copy > p > em {color: blue; font-weight: bold; }

Это правило будет применено ко всем следующим комбинированным элементам HTML-страницы:

<article class=”copy”><h1> … <em>Темно синий заголовок </em> … </h1>

</article>

Здесь вместо троеточий могут быть только сестринские элементы и не могут быть охватывающие <em> теги. Если же тег <em> помимо вложенности в <h1> вложен еще хотя-бы в один контейнер, то правило к нему применяться не будет.

Выбор смежных сестринских элементов

Чтобы выбрать элемент, расположенный на одном уровне с другим элементом и имеющий того же родителя, применяется комбинатор-плюс (+). Например, чтобы удалить верхний отступ абзаца <p>, непосредственно следующего за заголовком <h1>, требуется правило:

h1 + p {margin-top: 0}

Этот селектор означает «выбираем абзац p, непосредственно следующий за элементом h1, имеющим общего родителя с p».

Селектор выбора сестринских элементов может комбинироваться с другими комбинаторами. Пример правила с таким селектором:

p + p em {color: red; font-weight: bold; }

Если это правило применяется к HTML-странице, содержащей следующий набор тегов:

<p>Абзац 1(<em>первый</em>)!</p>

<p>Абзац 2(<em>второй</em>)!</p>

<p>Абзац 3(<em>третий</em>)!</p>

<blockquote>Текст 4(<em>четвертый</em>)!</blockquote>

<p>Абзац 5(<em>пятый</em>)!</p>

то темно красным будут отображены слова «второй» и «третий».

Выбор любых сестринских элементов

Селектор выбора любых сестринских элементов формируется комбинатором-тильда (~) и отличается от селектора выбора смежных сестринских элементов тем, что поиск среди сестринских элементов не останавливается при встрече элемента другого типа.

Например, если в предыдущем примере заменить комбинатор-плюс на комбинатор-тильда:

p ~ p em {color: red; font-weight: bold; }

то тот же набор тегов:

<p>Абзац 1(<em>первый</em>)!</p>

<p>Абзац 2(<em>второй</em>)!</p>

<p>Абзац 3(<em>третий</em>)!</p>

<blockquote>Текст 4(<em>четвертый</em>)!</blockquote>

<p>Абзац 5(<em>пятый</em>)!</p>

отобразит темно красным не только слова «второй» и «третий», но и «пятый».