4.6. Выбор первого дочернего элемента

Рассмотренные выше примеры контекстных селекторов позволяют выбирать все дочерние элементы относительно указанного родителя. Вместе с тем на практике часто возникают ситуации, когда необходимо выбрать только первый дочерний элемент. Для этого используется специальный тип селектора, имеющий следующий синтаксис:

родитель > потомок

Здесь в качестве родителя может выступать любой тег языка HTML, любой класс, идентификатор, контекстные селекторы и т.п. В качестве потомка указывается тег, который требуется выбрать. Следующий пример демонстрирует возможность выбора первого абзаца в теге div:

div > p {color: #a0a0a0;}

В результате на странице

<div>
<p>Это первый абзац</p>
<p>Это второй абзац</p>
</div>

первая строка будет отображена серым цветом, а вторая – черным.

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

div.menu > p.main {background: red;}

Такой селектор выберет все блоки div, у которых class="menu" и в них присвоит указанный стиль только первому найденному параграфу с атрибутом class="main".