Использование псевдоклассов 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 (единицы).
Например:
2 3 4 5 1 2 3 4 5 1 2
Все элементы будут разбиты на группы по 5 элементов в каждой, и в каждой группе быдет выделен третий элемент с начала.
2 3 4 5 1 2 3 4 5 1 2
Все элементы будут разбиты на группы по 5 элементов в каждой, и в каждой группе быдет выделен первый элемент с начала.
Если же стоит знак минус, например -3, то отсчет начинается справа налево, начиная с 0 (ноля).
2 3 4 5 1 2 3 4 5 1 2
Все элементы будут разбиты на группы по 5 элементов в каждой, и в каждой группе быдет выделен четвертый элемент с конца.
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).
2 3 4 5 1 2 3 4 5 1 2
Это означает, что все элементы находятся в одной группе, и надо выделить третий элемент слева.
Опустим вторую часть в скобках - номер элемента для выбора, он теперь равен нулю, а это значит, что отсчет начинается справа налево, то есть будет выбран последний элемент в каждой группе.
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)
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)
2 3 4 5 1 2 3 4 5 1 2
Чтобы выделить все элементы, начиная с третьего, необходимо разбить элементы на группы по одному элементу в каждой группе, и выделить элементы, которые идут после третьего
2 3 4 5 1 2 3 4 5 1 2
Этот способ довольно часто используют в навигации.
Если у вас раньше были проблемы с использованием nth-child, надеемся эта статья помогла вам понять повеедение этого псевдокласса.
Родственный пседокласс :nth-child ведет себя анлогично.
Удачи во фронтенде!
Комментарии
Пока нет комментариев
Оставить комментарий