:nth-child()

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

:nth-child(an ± b) { … }

Вместо a и b подставляются конкретные целые числа, а n является счётчиком и остаётся в исходном виде. Числа a и b могут быть отрицательными или нулём, в таком случае их можно не записывать — 2n+0 идентично 2n.

Формулу an+b следует понимать так: выбрать каждый a элемент, начиная с b. К примеру, 2n+3 означает выбрать каждый второй элемент, начиная с третьего. Вместо n браузер самостоятельно подставляет числа, начиная с 0. Поэтому мы можем определить какие элементы будут выбраны, самостоятельно заменяя n числами 0, 1, 2 и т. д. Таким образом, сперва выберется третий элемент (2×0+3=3), затем пятый (2×1+3=5), седьмой (2×2+3=7) и так до самого конца. Элементы с нулевым или отрицательным индексом игнорируются, поскольку таких элементов не существует.

Счётчик n начинается с 0.

Приведём несколько типовых комбинаций.

:nth-child(3)

Выбрать только третий элемент.

:nth-child(1)

Выбрать первый элемент. Идентично использованию :first-child.

:nth-child(n+3)

Выбрать все элементы, начиная с третьего; другими словами, все элементы, кроме первых двух.

:nth-child(2n)

Выбрать все чётные элементы. Вместо 2n можно использовать ключевое слово even — :nth-child(even).

:nth-child(2n+1)

Выбрать все нечётные элементы. Вместо формулы можно использовать ключевое слово odd — :nth-child(odd).

:nth-child(-n+3)

Выбрать только первые три элемента.

:nth-child(3n)

Выбрать каждый третий элемент.

:nth-child(3n+2)

Выбрать каждый третий элемент, начиная со второго.

:nth-child(n+2):nth-child(-n+4)

Выбрать все элементы со второго по четвёртый.

В примере 1 показано выделение чётных колонок таблицы другим цветом. Такое чередование цветных полос облегчает восприятие таблицы и позволяет проще находить данные, расположенные в одной колонке.

Пример 1. Колонки таблицы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>:nth-child()</title>
  <style>
   table { width: 100%; }
   th, td { padding: 4px; } 
   td:nth-child(even) {
    background: #c7c7c7; /* Цвет фона чётных ячеек */
   }
   td:nth-child(odd) {
    background: #f0f0f0; /* Цвет фона нечётных ячеек */
   }
  </style>
 </head>
 <body>
  <table>
   <thead>
    <tr>
     <th></th>
     <th>2023</th><th>2024</th><th>2025</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>Heфть</td>
     <td>43</td><td>51</td><td>79</td>
    </tr>
    <tr>
     <td>3oлoтo</td>
     <td>29</td><td>34</td><td>48</td>
    </tr>
    <tr>
     <td>Дерево</td>
     <td>38</td><td>57</td><td>36</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 1.

Колонки таблицы

Рис. 1. Колонки таблицы

Следует помнить, что :nth-child() работает только для однотипных братских элементов, вроде <li>, <td>, <tr> и др. В нижеприведённом примере братскими (имеющими общего родителя) являются элементы <li>. При этом элементы <a> не являются братскими, так как у каждого из них собственный родитель.

<ul>
  <li><a>Ссылка</a></li>
  <li><a>Ссылка</a></li>
  <li><a>Ссылка</a></li>
</ul>

В итоге селектор a:nth-child(2) для выбора второй ссылки не работает. Чтобы до неё добраться следует воспользоваться комбинированными селекторами. Обращаемся ко второму пункту списка <li>, а уже затем к ссылке <a>.

li:nth-child(2) > a { color: green; }

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 11.08.2018
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid