Псевдокласс first-child в CSS используется для выбора первого элемента в контейнере. При этом конкретный тип элемента не учитывается, значение имеет лишь его позиция относительно родителя. Существуют некоторые тонкости в работе этого селектора, которые необходимо понимать для правильного использования.

CSS-псевдоклассы

Наряду с идентификаторами, классами, тегами и атрибутами псевдоклассы являются одним из видов CSS-селекторов. Их особенность в том, что они не могут быть установлены непосредственно в HTML.

Примерами псевдоклассов являются "первая строка в контейнере", "первая буква в слове", "первый дочерний элемент у родителя". Браузер может обнаружить подобные элементы только после того, как он проанализировал страницу и составил DOM-дерево, а в ряде случаев только после отрисовки.

Наличие в CSS подобного механизма позволяет определять оформление, не привязанное к HTML-коду, что открывает большие возможности для дизайна.

Выбор первого элемента

Псевдокласс first-child в CSS отвечает за выбор самого первого элемента в родительском контейнере. Текстовые узлы при этом игнорируются, в счет идут только полноценные теги.

Найдем первые элементы в двух простых HTML-структурах.

  • Первый пункт
  • Второй пункт
  • Третий пункт

Есть только два способа прожить жизнь. Первый - будто чудес не существует. Второй - будто кругом одни чудеса. Альберт Эйнштейн

В результате выбраны будут первый пункт списка и тег, определяющий жирное начертание шрифта.

  • Первый пункт
    • два способа

    Синтаксис

    Все псевдоклассы в CSS определяются по определенному шаблону. Сначала указывается основной селектор, затем искомый псевдокласс, отделенный двоеточием.

    B:first-child { text-decoration: underline; }

    Такое правило подчеркнет текст первого элемента b внутри каждого контейнера.

    • Все хотят изменить мир сам. Лев Толстой
    • Тот, кто умеет, тот делает, кто не умеет - тот учит других. Бернард Шоу

    На скриншоте очевидно, что выделились только элементы, соответствующие одновременно селектору тега b и селектору псевдокласса:first-child. Стиль был применен внутри каждого контейнера, в данном случае внутри всех пунктов списка.

    Помимо тега, в качестве основного можно использовать любой другой селектор CSS, например:

    Class:first-child {} :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, но начинает счет элементов с конца контейнера.

    В CSS существует селектор, если быть более точным, псевдо-селектор, называемый nth-child. Пример его использования:

    Ul li:nth-child(3n+3) { color: #ccc; }

    Вышеприведённый CSS делает следующее: применяет стиля для каждого третьего элемента ненумерованного списка. А именно 3-го, 6-го, 9-го, 12-го и т.д. Но как это работает? А также какую выгоду можно извлечь используя nth-child ?

    Основной смысл заключается в выражении в скобках. nth-child принимает два ключевых слова: even (чётный) и odd (нечётный). Смысл их абсолютно ясен. Even выбирает чётные элементы (2, 4, 6), odd - нечётные (1, 3, 5).

    Как показано в примере выше, nth-child может обрабатывать выражения. Какое самое простое возможное выражение? Просто число. Если вы напишите какое-нибудь число в скобках, то будет выбран один единственный элемент. Например, выберем пятый элемент списка:

    Ul li:nth-child(5) { color: #ccc; }

    Вернёмся к нашему первому примеру, в котором мы использовали выражение (3n+3). Как он работает? Почему он выбирает каждый третий элемент? Вся суть в переменной n. Она принимает целые значения от нуля и больше. Давайте рассмотрим подробнее:

    (3 x 0) + 3 = 3 = 3-ий элемент (3 x 1) + 3 = 6 = 6-ой элемент (3 x 2) + 3 = 9 = 9-ый элемент и т.д.

    Теперь попробуем следующее выражение: nth-child(2n+1) :

    (2 x 0) + 1 = 1 = 1-ый элемент (2 x 1) + 1 = 3 = 3-ий элемент (2 x 2) + 1 = 5 = 5-ый элемент и т.д.

    В итоге получили тоже самое что и в случае с odd , таким образом нет нужды часто использовать такое выражение. Более того, наш первый пример тоже можно упростить и использовать вместо оригинального выражения (3n+3), выражение (3n):

    (3 x 0) + 0 = 0 = нет соответствия (3 x 1) + 0 = 3 = 3-ий элемент (3 x 2) + 0 = 6 = 6-ой элемент и т.д.

    Как видите, результат тот же, но не надо писать "+3". Также мы можем использовать отрицательные значения в выражении. Например, 4n-1:

    (4 x 0) - 1 = -1 = нет соответствия (4 x 1) - 1 = 3 = 3-ий элемент (4 x 2) - 1 = 7 = 7-ой элемент и т.д.

    Использование отрицательных значений для коэффициента при n, выглядит слегка странно, потому что в случае отрицательного результата не будет найдено соответствие. Вам надо будет постоянно изменять выражение, чтобы добавить положительных элементов. Как оказалось, этот подход очень удобен для выбора первых n элементов. Рассмотрим пример с "-n+3":

    0 + 3 = 3 = 3ий элемент -1 + 3 = 2 = 2-ой элемент -2 + 3 = 1 = 1-ый элемент -3 + 3 = 0 = нет соответствия

    Кроссбраузерность

    nth-child является одним из тех самых несчастных атрибутов, которые являются полностью кроссбраузерными, за исключением абсолютного нуля в IE, даже 8-ой версии. Поэтому, когда речь заходит о его использовании, то если ожидаемый результат - это в некотором роде визуальный эффект (например раскраска строк некой таблицы), то это идеальный подход. Но, вероятно, не стоит использовать его для чего-то более важного, что может повлиять, например, на корректность вёрстки.

    Конечно, если вы используете jQuery, то вам не стоит переживать по этому поводу, так как jQuery работает даже в Internet Explorer.

    Ну и напоследок

    Вы можете поиграть с различными выражениями для селектора на