Псевдокласс :nth-child()

Браузер перебирает детей родителя и сверяет номер каждого с паттерном из аргумента. Нумерация начинается с 1, а не с 0: :nth-child(1) эквивалентен :first-child, а :nth-child(0) не выберет ничего. Аргумент принимает три формы:

• Число – конкретная позиция: li:nth-child(3) выберет третий элемент списка.
• Ключевые слова – odd (нечётные позиции: 1, 3, 5…) и even (чётные: 2, 4, 6…), полные синонимы формул 2n+1 и 2n.
• Формула An+B – A задаёт шаг, B – смещение, а n пробегает неотрицательные целые числа: 0, 1, 2 и далее. Если результат формулы нулевой или отрицательный, элемент на такой позиции просто не выбирается.

Проверить любую формулу можно простой подстановкой: для 3n+4 при n = 0, 1, 2 получаются позиции 4, 7 и 10 – каждый третий элемент начиная с четвёртого. Отрицательный коэффициент разворачивает выборку: -n+3 даёт позиции 3, 2 и 1, то есть первые три элемента.

/* зебра списка */
li:nth-child(even) { background-color: lightyellow; }

/* первые три пункта */
li:nth-child(-n + 3) { border: 2px solid orange; }

/* вторая колонка любой таблицы */
tbody tr :nth-child(2) { text-align: center; }

Формула An+B: таблица-шпаргалка

Диапазон задаётся цепочкой из двух условий: :nth-child(n+8):nth-child(-n+15) выберет элементы с 8-го по 15-й включительно. Отсчёт с конца – задача зеркального псевдокласса :nth-last-child(): запись :nth-last-child(-n+3) означает «последние три».

Почему li:nth-child(2) может «не работать»

В селекторе span:nth-child(2n+1) позиция считается среди всех соседей любого типа, но правило применяется только к тем нечётным позициям, где действительно стоит span. Классический пример из документации MDN: у родителя пять детей – span, span, span, em, span. Выделятся span на позициях 1, 3 и 5, а em на позиции 4 визуально «ломает» ожидаемое чередование: подсвеченные третий и пятый span оказываются рядом. Если считать нужно только элементы конкретного тега – берите :nth-of-type(), а если фильтровать по произвольному селектору – синтаксис of S, где браузер сначала отбирает детей по селектору и лишь потом нумерует.