CSS псевдоклассы :nth-child и :nth-of-type

:nth-child

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

Возьмем обычный список, зададим симпатичные стили его элементам и отдельно раскрасим 5ый элемент:

See the Pen aboqOvL by Websitio (@Websitio) on CodePen.

Таким образом можно выбрать несколько элементов, 5ый и 7ой:

See the Pen wvwyaGw by Websitio (@Websitio) on CodePen.

Переменная n

В общем виде значение задаётся с помощью математического выражения an+b, где a и b это целые числа, а n последовательность целых чисел от 0 и до бесконечности (0, 1, 2, 3 ....). Если браузер находит элемент с вычисленным порядковым номером, то применяет кнему указанные стили.

Рассмотрим на примере :nth-child(2n).
При n=0 получаем 2х0=0. Нулевых элементов нет - ничего не покрасится.
При n=1 2х1=2. Стили применятся ко второму по порядку элементу.
При n=2 2х2=4. Стили применятся к четвертому элементу.
И т.д.

Так мы получили последовательность для выбор четных элементов.

Для чётных элементов существует также специальное ключевое слово even.

li:nth-child(even) { }

Аналогично для нечетных чисел есть специальное слово odd или запись через счетчик n :nth-child(2n + 1)

n=0 получаем 2х0+1=1. 1ый элемент.
n=1 2х1+1=3. 3ий элемент.
n=2 2х2+1=5. 5ый элемент.

В примере ниже одновременно применены odd и even.

See the Pen vYBdOxb by Websitio (@Websitio) on CodePen.

Более сложные выражения

:nth-child(5n-1) - стили применятся к каждому 5му элементу начиная с 4го

See the Pen LYPQVLB by Websitio (@Websitio) on CodePen.

Выделить все элементы кроме нескольких начальных

Если в формуле an+b задать b как большое положительное число, то элементы с номером меньше b не будут покрашены, а все остальные, начиная с номера b - будут

See the Pen rNBJVGG by Websitio (@Websitio) on CodePen.

Отрицательный n

:nth-child(-n+5)
Такая запись позволит выделить только 5 начальных элементов, а все остальные не выделять.

See the Pen ZEzrGay by Websitio (@Websitio) on CodePen.

Комбинирование выражений в :nth-child

Можно применять последовательно несколько :nth-child()

:nth-child(n+3):nth-child(-n+13)
Первая часть выражения выделит элементы с 3-го до бесконечности, вторая до 13го.
Стили применяться к элементам на пересечении этих двух множеств: от 3 до 13. Всего будут выделены 11 элементов.

See the Pen WNeMvMx by Websitio (@Websitio) on CodePen.

Комбинировать можно сколько угодно выражений. Возьмем только четные элементы из предыдущего интервала [3,13]

:nth-child(n+3):nth-child(-n+13):nth-child(odd)

See the Pen qBWxdKJ by Websitio (@Websitio) on CodePen.

Или не будем писать плохой код и переопределять цвета, а зададим 2 отдельных правила:

See the Pen eYOVNje by Websitio (@Websitio) on CodePen.

Особенность :nth-child

:nth-child ищет лишь те элементы, которые соответствуют указанному типу селектора.

Пусть в теге p есть дочерние элементы strong и b

Запись strong:nth-child(even) сработает только для тегов strong. Соответствующие номера попадающие на тег b будут пропущены. Обратите внимание, элемент номер 8 является первым, т.е. нечетным strong'ом, но четным элементом в наборе. И к нему будет применен фон, потому что расчет идет среди всех элементов набора.

Дополнительный синтаксис of selector

При такой записи в расчете последовательности будут учитываться только те элементы, которые указаны после of

Примеры:

li:nth-child(-n + 3 of .bright)

li:nth-child(odd of li.bright)

See the Pen nth-child by Websitio (@Websitio) on CodePen.

:nth-of-type

Похож на предыдущий псевдокласс, но учитывает тип элемента

Возьмем блок и разместим в него через один теги b и strong. Для наглядности b сделаем круглыми, а strong квадратными, а нумерацию не сквозную, а по тегам.

Для начала попробуем простые выражения для псевдокласса :nth-of-type

b:nth-of-type(2) и strong:nth-of-type(5)

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

See the Pen pozaJYr by Websitio (@Websitio) on CodePen.

Выберем нечетные b:nth-of-type(odd) и четные strong:nth-of-type(even)

See the Pen dybdoLE by Websitio (@Websitio) on CodePen.

Комбинированные :nth-of-type

Зададим фон нечетным b только из первых 5ти b:nth-of-type(odd):nth-of-type(-n+5)

Зададим фон четным strong после 5го strong:nth-of-type(even):nth-of-type(n+6)

See the Pen aboqOrR by Websitio (@Websitio) on CodePen.

Отличия :nth-child от :nth-of-type

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