Справочник HTML & CSS

:nth-child()

Выбирает детей по их номеру: третий, каждый чётный, каждый третий.

Синтаксис

selector:nth-child(an+b) { … }

Параметры

Параметр	Тип	Описание
n	number	Номер, считая с 1: `:nth-child(3)`.
odd \| even	keyword	Нечётные или чётные позиции.
an+b	formula	Формула: n принимает значения 0, 1, 2…; `3n` — каждый третий, `-n+2` — первые два.

Примеры

Полосатые строки таблицы:

<style>
  tr:nth-child(even) { background: whitesmoke; }
  td { padding: 4px 12px; }
</style>
 
<table>
  <tr><td>Anna</td><td>$25</td></tr>
  <tr><td>Oleg</td><td>$40</td></tr>
  <tr><td>Maria</td><td>$15</td></tr>
  <tr><td>Ivan</td><td>$30</td></tr>
</table>

Каждый третий пункт и первые два:

<style>
  li:nth-child(3n) { color: crimson; }
  li:nth-child(-n+2) { font-weight: bold; }
</style>
 
<ol><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li></ol>

Примечания

Номера считаются среди всех детей, какой бы у них ни был тег. :nth-last-child() считает с конца. Чтобы считать только элементы одного типа, берите :nth-of-type().

См. также

:nth-of-type() — Как `:nth-child()`, но считает только соседей с тем же тегом.
:first-child — Срабатывает у элемента, который стоит первым среди детей своего родителя.
:last-child — Срабатывает у элемента, который стоит последним среди детей своего родителя.

Вопросы и ответы по теме

В учебнике

Псевдоклассы — Стили для состояний и положения элементов — hover, focus, ссылки, first-child, nth-child, not и поля форм.

Спасибо, что читаете!