CSS псевдокласс :nth-child

:nth-child() выделяет один или более элементов, основываясь на их позиции среди группы элементов.

:nth-child() указывается с единственным аргументом, описывающим паттерн для выбирания элементов.

 

1 1 Первый элемент, является синонимом псевдокласса :first-child.
7 7 Седьмой элемент.
2n 2, 4, 6, … Все четные элементы, аналог значения even.
2n+1 1, 3, 5, … Все нечетные элементы, аналог значения odd.
3n+2 2, 5, 8, 11, 14
-n+3 3, 2, 1
5n-2 3, 8, 13, 18, 23
even 2, 4, 6, 8, 10 Все четные элементы.
odd 1, 3, 5, 7, 9 Все нечетные элементы.

 

Применение данного псевдокласса широко распространено, он позволяет чередовать стили строк в таблицах, списках, придать стиль сочетанию дочерних элементов и так далее.