Коротко: :nth-child() выбирает элементы по их порядковому номеру среди братьев-элементов. Внутри указывают число, ключевое слово odd/even или формулу, например 2n. Родственный псевдокласс :nth-of-type() считает только элементы того же типа.
nth-child избавляет от лишних классов: раскраска строк таблицы, отступы у каждого второго блока, оформление первого и последнего элемента. Это заметно упрощает вёрстку списков и сеток.Синтаксис
| Запись | Что выбирает |
|---|---|
:nth-child(3) |
третий элемент |
:nth-child(odd) |
нечётные (1, 3, 5…) |
:nth-child(even) |
чётные (2, 4, 6…) |
:nth-child(3n) |
каждый третий |
:nth-child(-n+3) |
первые три |
Примеры
li:nth-child(2n) { background: #f3f3f3; }
li:nth-child(1) { font-weight: 700; }
li:last-child { border: none; }
.grid > *:nth-child(3n) { margin-right: 0; }Формула an + b задаёт шаг: 2n — каждый второй, 3n+1 — каждый третий начиная с первого.
Вкладки: важные детали
/* считает всех братьев */
.item:nth-child(2) { }
/* считает только элементы своего типа */
p:nth-of-type(2) { }:nth-child считает все соседние элементы, а :nth-of-type — только такие же теги. Если в родителе разные элементы, результаты разойдутся.
2n четные (2, 4, 6…)
2n+1 нечетные
3n каждый третий
-n+3 первые три
n+4 начиная с четвертогоФормулу читают так: n — счётчик, начинающийся с нуля. Поэтому -n+3 даёт 3, 2, 1 — первые три элемента.
Частые приёмы: полосатая таблица, отступы в сетке у каждого третьего, скрытие лишних элементов после определённого номера, акцент на первом и последнем.
:nth-child считает элементы, а не «видимые» узлы. Если в разметку добавлен лишний элемент (например, реклама или пустой блок), нумерация сместится и стили «поедут». Проверяйте итоговую структуру.Практика: применить nth-child
- Определите, что нужно выбрать: чётные, каждый третий, первые.
- Подберите формулу.
- Проверьте, нет ли лишних элементов в родителе.
- Если типы разные — используйте
nth-of-type. - Задайте стили и проверьте результат.
- Убедитесь, что на мобильных нумерация не ломает вид.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Стиль не там | лишний элемент в родителе | проверить разметку |
| Не сработало | в родителе другой тип элементов | nth-of-type |
| Выбралось больше нужного | неверная формула | уточнить шаг |
| Первый элемент исключён | n начинается с нуля |
скорректировать +b |
| Стиль перебит | низкая специфичность | усилить селектор |
Проверьте себя
:nth-child(2n)?
nth-of-type отличается от nth-child?
Вопросы и ответы
Скорее всего, в родителе есть лишний элемент, который сдвигает нумерацию. :nth-child считает всех братьев подряд, включая скрытые.
Формулой :nth-child(-n+3). Знак минус и +3 дают отсчёт до третьего элемента включительно.
Да: .item:nth-child(2) выберет элемент с классом item, который является вторым ребёнком. Это уточняет выборку и повышает специфичность.
Прямого счётчика «по классу» нет: псевдокласс считает позицию среди детей. Но можно комбинировать класс и nth-child для нужного отбора.
Итоги
:nth-child()выбирает по порядковому номеру.- Формулы
an+bзадают шаг и смещение. odd/even— нечётные и чётные.:nth-of-type()считает только элементы того же тега.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.