: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; }

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

Автор: Влад Мержевич
Последнее изменение: 12.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты