Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.

Обозначения

Значения

odd Все нечётные номера элементов. even Все чётные номера элементов. <число> Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке. <выражение> Задаётся в виде an±b , где a и b - целые числа, а n - счётчик, который автоматически принимает значение 0, 1, 2...

Если a равно нулю, то оно не пишется и запись сокращается до b . Если b равно нулю, то оно также не указывается и выражение записывается в форме an . a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

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

Допустимо комбинировать два псевдокласса :nth-child для выбора диапазона элементов. Здесь будут выбраны все элементы со второго по пятый.

:nth-child(n+2):nth-child(-n+5) { … }

Пример

В данном примере псевдокласс :nth-child используется для изменения стиля первой строки таблицы, а также для выделения цветом всех чётных строк (рис. 1).

Рис. 1. Применение псевдокласса:nth-child к строкам таблицы

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации ) - первая черновая версия стандарта.

Существует такой селектор, точнее псевдокласс, называемый: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 и приведенного алгебраического уравнения. Подумайте об n , как о начинающемся с нуля множестве целых чисел. Потом дополните уравнение. Так 3n это 3×n , а все уравнение вместе это (3×n)+3 . Теперь, подставляя вместо n числа больше или равные нулю, мы получим:

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

А как насчёт:nth-child(2n+1) ?

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

Так, стоп! Это ведь то же самое, что и odd . Тогда, возможно, не стоит использовать это выражение? Но разве в этом случае мы не подвергаем наш первый пример излишнему усложнению? Что, если вместо 3n+3 мы запишем 3n+0 или ещё проще 3n ?

• (3 × 0) = 0 = ничего нет
• (3 × 1) = 3 = 3-й элемент
• (3 × 2) = 6 = 6-й элемент
• (3 × 3) = 9 = 9-й элемент и т.д.

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

• (4 × 0) – 1 = –1 = ничего нет
• (4 × 1) – 1 = 3 = 3-й элемент
• (4 × 2) – 1 = 7 = 7-й элемент и т.д.

Использование -n может показаться странным - ведь если конечный результат отрицательный, то никакие элементы в выборку не попадут. Но если дополнить уравнение и снова сделать результат положительным, то выборка окажется довольно интересной: при помощи неё можно будет получить первые n элементов, например так: -n+3:

• –0 + 3 = 3 = 3-й элемент
• –1 + 3 = 2 = 2-й элемент
• –2 + 3 = 1 = 1-й элемент
• –3 + 3 = 0 = ничего нет и т.д.

На SitePoint есть хороший справочник с милой табличкой , которую я бесстыдно опубликую здесь:

Поддержка браузерами

Селектор:nth-child - один из немногих CSS-селекторов, который почти полностью поддерживается в современных браузерах и абсолютно не поддерживается в IE, даже в IE8. Поэтому когда дело доходит до его использования, и конечный результат сделан по технологии прогрессивного улучшения - вы можете смело использовать его для некоторых оформительских элементов, вроде расцветки строк таблицы. Однако не стоит применять его в более серьезных случаях. Например, полагаться на него в раскладке сайта или удалять правое поле из каждого третьего блока в сетке три на три, чтобы они вошли в ряд.

CSS nth-child — это псевдокласс, используемый для выбора элементов с помощью числового выражения. Его синтаксис на первый взгляд может показаться немного запутанным.

В этой статье мы рассмотрим:

• различные способы использования :nth-child ;
• более гибкий селектор :nth-of-type ;
• и связанные с ними селекторы :nth-last-child и :nth-last-of-type .

:nth-last-of-type

:nth-last-of-type выбирает дочерние элементы, если их позиция в документе совпадает с шаблоном, описываемым алгебраическим выражением.

Селектор :nth-last-of-type выглядит примерно так:

li:nth-child(выражение); {}

«Выражение » может быть представлено ключевыми словами even или odd , целым числом или формулой по типу an+b , где a и b — целые числа, положительные или отрицательные.

Поскольку псевдокласс CSS nth child может использоваться для выбора диапазона различных элементов. Давайте рассмотрим несколько примеров, чтобы стало понятнее.

У меня есть маркированный список из 12 элементов. Посмотрим, как можно использовать :nth-child для выбора определенного элемента или набора элементов по шаблону:

• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum

Чтобы выбрать третий элемент списка, нужно указать li:nth-child(3) . Чтобы выбрать все четные элементы, можно использовать ключевое слово even. И наоборот, можно использовать :nth-child(odd) , чтобы выбрать все элементы с нечетным номером.

CSS nth child каждый 3 й — указываем li:nth-child(3n) . Чтобы выбрать первые четыре элемента, используем li:nth-child(-n+4) . Чтобы выбрать все, кроме первых четырех элементов, можно использовать li:nth-child(n+5) .

Выражение an + b

Альтернативой использованию ключевого слова odd является использование выражения 2n+1 . Но как это работает?

Когда выражение в формате an+b содержит отличные от ноля значения a и b , дочерние элементы разбиваются на группы. Если это выражение 2n+1 , дочерние элементы разбиваются на группы по два. Каждому элементу в группе присваивается индекс, начиная с 1 . Соответствующий элемент в каждой группе — это индекс номер b . В нашем примере это будет первый элемент.

Если выражение 3n+2 , элементы группируются по три элемента, и второй элемент в каждой группе соответствует выражению.

Если значение b является отрицательным, соответствующим в группе является элемент с индексом b . Но отсчитывается он в обратном направлении от индекса 1 . В этом случае соответствующий элемент будет принадлежать не данной, а предшествующей группе.

Ключевое слово even в CSS nth child может быть выражено как 2n . В этом случае у нас нет значения b , поэтому выбирается каждый элемент группы с индексом a ; 2n выбирает каждый второй элемент, 3n — каждый третий, 4n — каждый четвертый и так далее.

Лично я считаю, что концепция разбивки дочерних элементов на группы и поиска индекса соответствия для каждой группы очень запутана. Хотя именно так их описывает спецификация CSS-селекторов .

Мне больше нравится концепция поиска каждого n-ного элемента — каждого 2-го, 3-го или 4-го и т.д. А потом мне проще представить, что вторая часть выражения — это смещение.

В случае 2n+1 я читаю это выражение следующим образом: «Найти каждый второй элемент и переместить выделение вниз на 1 ».

Если выражение 3n-5 , оно будет читаться так: «Найти каждый третий элемент и переместить выделение вверх на 5 ».

Другие селекторы:nth-child

:nth-child имеет соответствующий ему псевдокласс :nth-last-child , который работает наоборот.

li:nth-last-child(3n) начинает с последнего дочернего элемента и обрабатывает их в обратном направлении, сопоставляя каждый третий элемент с конца списка.

Этот псевдокласс менее распространен. Тем не менее, часто необходимо выбрать первый или последний дочерний элемент. Это можно сделать с помощью :nth-child(1) или :nth-last-child(1) , но этот метод встречается не так часто, как псевдоклассы :first-child и :last-child . При этом только :first-child работает в IE8 , а :last-child и :nth-селекторы — нет.

:nth-of-type

Что меня часто не удовлетворяет, так это то, что псевдокласс CSS nth child отбирает дочерние элементы по индексу и не учитывает тип элемента.

Рассмотрим следующий пример.