Как стилизовать каждый n-й элемент списка с помощью CSS-псевдоклассов (nth-child / nth-last-child)?

Основы псевдоклассов nth-child и nth-last-child

Псевдокласс :nth-child() в CSS позволяет выбирать элементы на основе их порядкового номера среди всех дочерних элементов родительского контейнера. Это мощный инструмент для стилизации списков, таблиц, сеток и других повторяющихся структур без необходимости добавлять дополнительные классы или JavaScript.

Синтаксис и примеры

В скобках можно указывать:

• Конкретное число: :nth-child(3) — третий элемент.
• Ключевые слова: odd (нечётные) и even (чётные).
• Формулу вида an + b, где a — шаг, b — смещение. Например, 3n+1 — каждый третий элемент, начиная с первого.

<ul>
  <li>Первый</li>
  <li>Второй</li>
  <li>Третий</li>
  <li>Четвёртый</li>
  <li>Пятый</li>
</ul>

<style>
  li:nth-child(3n+1) {
    color: red;
  }
  li:nth-last-child(2) {
    background: yellow;
  }
</style>

В этом примере красным будут выделены первый и четвёртый элементы (3*0+1 и 3*1+1), а жёлтым — предпоследний элемент (второй с конца).

Практическое применение

Эти псевдоклассы часто используются для:

• Стилизации чётных/нечётных строк таблиц для улучшения читаемости.
• Создания паттернов в сетках (например, каждый третий элемент с отступом).
• Выделения первого или последнего элемента в группе.

Важно помнить, что :nth-child() считает все дочерние элементы, а не только элементы определённого типа. Если нужно учитывать только элементы с определённым тегом, используйте :nth-of-type().

Вывод: псевдоклассы :nth-child() и :nth-last-child() — незаменимые инструменты для гибкой и лаконичной стилизации повторяющихся элементов без изменения HTML-структуры. Они особенно полезны при работе с динамическими списками и таблицами, где количество элементов может меняться.