Заказать звонок
Заказ обратного звонка

Использование псевдоклассов nth-of-type и nth-child


Чтобы правильно использовать псевдокласс nth-of-type (или nth-child), прежде всего небоходимо понять его поведение.

Рассмотрим типичный пример псевдокласса:
element:nth-of-type(5n+3)

Для начала разберемся, что означают цифры в круглых скобках.
Число перед буквой n указывает сколько элементов находится в каждой группе, а число после знака +/- указывает какой элемент в группе надо выделить.
Если число со знаком плюс, то считать надо слева направо начиная с 1, если число со знаком минус, то считать небходимо справа налево начиная с 0.

Например:


5n означает, что элементы надо разбить на группы по 5 элементов в каждой группе.


4n - разбить на группы по 4 элемента в каждой.


n (или 1n, это одно и то же) - разбить на группы по 1 элементу в каждой группе.


0n - все элементы находятся в одной группе.

Вторая часть +3 показывает, какой элемент нужно выбрать из каждой группы. Знак + означает, что отсчет надо начинать слева направо, начиная с 1 (единицы).

Например:

element:nth-of-type(5n+3)
1 2 3 4 5 1 2 3 4 5 1
2 3 4 5 1 2 3 4 5 1 2

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

element:nth-of-type(5n+1)
1 2 3 4 5 1 2 3 4 5 1
2 3 4 5 1 2 3 4 5 1 2

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

Если же стоит знак минус, например -3, то отсчет начинается справа налево, начиная с 0 (ноля).

element:nth-of-type(5n-3)
1 2 3 4 5 1 2 3 4 5 1
2 3 4 5 1 2 3 4 5 1 2

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

element:nth-of-type(5n-1)
1 2 3 4 5 1 2 3 4 5 1
2 3 4 5 1 2 3 4 5 1 2

Все элементы будут разбиты на группы по 5 элементов в каждой, и в каждой группе быдет выделен второй элемент с конца.

В скобках любую из двух частей можно опустить, в таком случае она считается как ноль.
Опустим первую часть в скобках - значение количества элементов в группе. Следует помнить, что в таких случаях, когда записуют только вторую часть, где указывают номер элемента для выбора, можно использовать только положительное число, то есть только +3, и, поскольку значение позитивное, то при этом сам плюс тоже можно опустить
То есть запись element:nth-of-type(0n + 3) можно записать без первой части element:nth-of-type(+3) и даже без плюса element:nth-of-type(3).

element:nth-of-type(3)
1 2 3 4 5 1 2 3 4 5 1
2 3 4 5 1 2 3 4 5 1 2

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

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

element:nth-of-type(5n)
1 2 3 4 5 1 2 3 4 5 1
2 3 4 5 1 2 3 4 5 1 2

Выделить четные элементы: element::nth-of-type(even)
Правило element::nth-of-type(2n) указывает, что в каждой группе будет 2 элемента и будет выделен последний элемент в группе, то есть каждый второй, или другими словами, каждый четный, а поскольку слово even - означает четные числа, то это же правило можно записать element::nth-of-type(even)

element::nth-of-type(even)
1 2 3 4 5 1 2 3 4 5 1
2 3 4 5 1 2 3 4 5 1 2

Соответсвтенно, чтобы выделить нечетные, используютelement::nth-of-type(odd) и это то же самое что и element::nth-of-type(2n + 1) или element::nth-of-type(2n - 1)

element::nth-of-type(odd)
1 2 3 4 5 1 2 3 4 5 1
2 3 4 5 1 2 3 4 5 1 2

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

element::nth-of-type(1n + 3)
1 2 3 4 5 1 2 3 4 5 1
2 3 4 5 1 2 3 4 5 1 2

Этот способ довольно часто используют в навигации.

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

Удачи во фронтенде!

SimplaMarket и Netpeak cтали партнерами Увеличиваем скорость Photoshop в веб-разработке.

Комментарии

Пока нет комментариев

Оставить комментарий
.