Псевдокласс :nth-child

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

/* Выбрать первый элемент списка */
li:nth-child(1) { }

/* Выбрать 5-й элемент списка */
li:nth-child(5) { }

/* Нечетные элементы начиная с первого */
li:nth-child(odd) { }

/* Выбрать каждый третий элемент списка начиная с первого */
li:nth-child(3n - 2) { }

/* Выбрать каждый 3-й элемент списка начиная со 2-го */
li:nth-child(3n - 1) { }

/* Каждый 3-й элемент, имеющий класс "el" */
.el:nth-child(3n) { }

/* Кроме первого элемента */
:nth-child(n+2) { }

/* Первые три элемента */
:nth-child(-n+3) { }

Допустимые значения псевдокласса

Значение, указываемое в скобках, означает номера элементов, которым будет присвоен определенный стиль, и может быть задан одним из следующих способов:

• слово odd – указание всех нечетных элементов-наследников;
• even – указание всех четных элементов;
• положительное целое число – указание одного элемента;
• формула вида an + b, в которой – указание группы элементов, члены которой выбираются  с определенной периодичностью – где a, b – целые числа, n – счетчик, которому поочередно присваиваются целые положительные значения начиная с 0. Если n = 0, то an не указываются, a и b могут быть отрицательными.

Первые два способа часто употребляются при оформлении таблиц – для создания контраста между соседними столбцами или строками, что облегчает восприятие информации в случае их большого количества.

Обратиться к нечетным элементам можно как значением – odd, так и с помощью формулы 2n+1. Точно так же even можно заменить формулой 2n (каждый второй).

На примере мы сделали таблицу, где для четных элементов установили голубой фон для строк, а для нечетных – светло-зеленый.

See the Pen
nth-child by Андрей (@adlibi)
on CodePen.

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

При необходимости можно задавать в одной строке более одного псевдокласса, объединяя накладываемые ими ограничения.

/* выбор второй, третьей и четвертой ячеек строки*/
td :nth-child(n+2):nth-child(-n+4) 

или

/* выбор четных ячеек начиная с четвертой */
td:nth-child(n+4):nth-child(even) 

А вот цепочка из трех псевдоклассов:

/* происходит отбор четных тегов между 4-м и 12-м включительно */
:nth-child(n+4):nth-child(even):nth-child(-n+12) 

Например, требуется назначить определенный стиль для пятой, седьмой и девятой строк таблицы. Для этого нужно объединить три псевдокласса:

tr :nth-child(-n+9) :nth-child(n+5) :nth-child(odd)

Особенности использования

Задавать стиль через псевдокласс :nth-child() можно двумя способами

• указывая тип выделяемого элемента: tr :nth-child(2n);

• записывая без селектора: :nth-child(-n+3).

В первом случае будут пересчитаны все элементы, но стиль будет присвоен лишь тем из них, тип которых совпадает с указанным в левой части записи.

Во втором – пересчет будет таким же, как и в первом, а стиль получат все четные, независимо от их типа. Это не принципиально, если родитель имеет дочерние элементы только одного типа, как, например, у строки таблицы ячейки.

Но что же делать, если элементы разнородные – например, у заголовка, кроме подзаголовков, есть и абзацы – а стиль нужно присвоить только некоторым подзаголовкам?

На такой случай в CSS припасен другой инструмент, который учитывает теги только определенного типа. Это :nth-of-type(), еще один псевдокласс. То есть если у вас в списке элементы разного типа, и вы хотите выбрать по определенному правилу только элементы какого-то одного типа, используйте nth-of-type вместо nth-child.