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

css selectors

 

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

Селекторnth-child(odd | even | <число> | <выражение>) {...}

Значения

odd - Все нечётные номера элементов.

even - Все чётные номера элементов.

<число> - Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.

<выражение> - Задаётся в виде an±b, где a и b — целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2...

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

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

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

Табл. 1. Результат для различных значений псевдокласса

Значение

Номера элементов

Описание

1

1

Первый элемент, является синонимом псевдокласса first-child

5

5

Пятый элемент.

2n

2, 4, 6, 8, 10,…

Все чётные элементы, аналог значения even.

2n+1

1, 3, 5, 7, 9,…

Все нечётные элементы, аналог значения odd.

3n

3, 6, 9, 12, 15,…

Каждый третий элемент.

3n+2

2, 5, 8, 11, 14,…

Каждый третий элемент, начиная со второго.

n+4

4, 5, 6, 7, 8,…

Все элементы, кроме первых трёх.

-n+3

3, 2, 1

Первые три элемента.

5n-2

3, 8, 13, 18, 23,…

even

2, 4, 6, 8, 10,…

Все чётные элементы.

odd

1, 3, 5, 7, 9,…

Все нечётные элементы.

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

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