Псевдокласс nth-child
Псевдокласс 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) { … }