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'ом, но четным элементом в наборе. И к нему будет применен фон, потому что расчет идет среди всех элементов набора.

: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 расчет идет среди потомков указанного типа. На данный момент тип элемента может быть задан как селектором по тегу, так и классами, но считаться он будет по типу тега.