Псевдокласс first-child в CSS используется для выбора первого элемента в контейнере. При этом конкретный тип элемента не учитывается, значение имеет лишь его позиция относительно родителя. Существуют некоторые тонкости в работе этого селектора, которые необходимо понимать для правильного использования.
CSS-псевдоклассы
Наряду с идентификаторами, классами, тегами и атрибутами псевдоклассы являются одним из видов CSS-селекторов. Их особенность в том, что они не могут быть установлены непосредственно в HTML.
Вам будет интересно:Форматирование чисел: функция PHP number_format()
Примерами псевдоклассов являются "первая строка в контейнере", "первая буква в слове", "первый дочерний элемент у родителя". Браузер может обнаружить подобные элементы только после того, как он проанализировал страницу и составил DOM-дерево, а в ряде случаев только после отрисовки.
Наличие в CSS подобного механизма позволяет определять оформление, не привязанное к HTML-коду, что открывает большие возможности для дизайна.
Выбор первого элемента
Псевдокласс first-child в CSS отвечает за выбор самого первого элемента в родительском контейнере. Текстовые узлы при этом игнорируются, в счет идут только полноценные теги.
Найдем первые элементы в двух простых HTML-структурах.
- Первый пункт
- Второй пункт
- Третий пункт
Есть только два способа прожить жизнь. Первый - будто чудес не существует. Второй - будто кругом одни чудеса. Альберт Эйнштейн
В результате выбраны будут первый пункт списка и тег, определяющий жирное начертание шрифта.
два способа
Синтаксис
Все псевдоклассы в CSS определяются по определенному шаблону. Сначала указывается основной селектор, затем искомый псевдокласс, отделенный двоеточием.
b:first-child { text-decoration: underline; }
Такое правило подчеркнет текст первого элемента b внутри каждого контейнера.
- Все хотят изменить мир, но никто не хочет измениться сам. Лев Толстой
- Тот, кто умеет, тот делает, кто не умеет - тот учит других. Бернард Шоу
На скриншоте очевидно, что выделились только элементы, соответствующие одновременно селектору тега b и селектору псевдокласса :first-child. Стиль был применен внутри каждого контейнера, в данном случае внутри всех пунктов списка.
Помимо тега, в качестве основного можно использовать любой другой селектор CSS, например:
.class:first-child {} [alt]:first-child {} *:first-child {}
Типичные ошибки
Псевдокласс первого элемента first-child в CSS выбирает строго тег, находящийся на первом месте в родительском контейнере. Даже если элемент полностью соответствует селектору, но не является первым потомком, он не будет выбран.
Для примера возьмем предыдущий список цитат и перенесем авторов в начало.
- Лев Толстой Все хотят изменить мир, но никто не хочет измениться сам.
- Бернард Шоу Тот, кто умеет, тот делает, кто не умеет - тот учит других.
Несмотря на то что селектор элемента остался прежним, CSS-стиль не применился, так как первым элементом в контейнере теперь является i.
Еще одной ошибкой является игнорирование тега
. Это такой же HTML-элемент, как и прочие. Если он окажется в контейнере перед искомым блоком, то селектор CSS first-child не сработает.
Учет типа элемента
Чтобы избежать подобных ситуаций, можно использовать псевдокласс first-of-type. Он работает так же, как селектор CSS first-child, но учитывает тип элемента.
b:first-of-type {
text-decoration: underline;
} 
Теперь при подсчете учитываются только элементы, соответствующие селектору b.
Выбор последнего элемента
Существует также псевдокласс last-child, который работает аналогично селектору CSS first-child, но начинает счет элементов с конца контейнера.