CSS: Как работает псевдо селектор nth-child

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

ul li:nth-child(3n+3) {  
  color: #DA8C12;
}

Что делает селектор nth-child в данном примере? Выбирает каждый третий LI элемент неупорядоченного списка, то-есть 3, 6, 9, 12 и т.д.

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

Внутри скобок можно написать even и odd. В этом случае будут выбраны все четные или нечетные элементы соответственно. Также, как вы уже видели в предыдущем примере, внутри скобок может находиться выражение. Самое простое выражение, это число. Если вы в скобках напишете число, тогда селектором будет выбрано только элемент с этим поряддковым номером. Вот так можно выбрать пятый элемент:

ul li:nth-child(5) {  
  color: #DA8C12;
}

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

(3 x 0) = 0 = no match
(3 x 1) = 3 = 3rd Элемент
(3 x 2) = 6 = 6th Элемент
(3 x 3) = 9 = 9th Элемент
...

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

(4 x 0) - 1 = -1 = нет совпадений
(4 x 1) - 1 = 3 = 3-й Элемент
(4 x 2) - 1 = 7 = 7-й Элемент

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

-0 + 3 = 3 = 3-й Элемент
-1 + 3 = 2 = 2-й Элемент
-2 + 3 = 1 = 1-й Элемент
-3 + 3 = 0 = нет совпадений
...

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

Совместимость с браузерами

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

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