CSS псевдо-класс :nth-child(n)

Поддержка браузерами


12.0+	9.0+	3.5+	4.0+	9.6+	3.2+

Описание

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

Синтаксис

:nth-child(число) { свойства }

В круглых скобках указывается аргумент, который может быть числом, ключевым словом или числовым выражением в виде an+b, где a и b целые числа, а n - счётчик, автоматически принимающий целые неотрицательные значения от 0 и больше: 0, 1, 2, 3, ... .

С помощью числа можно указать конкретный порядковый номер дочернего элемента, к которому необходимо применить стиль:

/* выбрать третий по счёту пункт списка */
ul li:nth-child(3) { color: red; }

Всего есть два возможных ключевых слова: odd (нечётные) и even (чётные). Они позволяют выбирать дочерние элементы имеющие чётные или нечётные порядковые номера:

/* выбрать все строки в таблице с нечётным порядковым номером */
tr:nth-child(odd) td { background-color: silver; }

Часть выражения "an" вычисляет позиции дочерних элементов по следующей формуле: число*n, так как n - счётчик, вместо него при вычислении автоматически подставляются числовые значения начиная с 0 и далее значение каждый раз увеличивается на единицу больше предыдущего: 0,1,2,3 и т.д. Допустим нам необходимо выбрать каждый третий пункт списка, для этого нам надо написать всего лишь 3n:

ul li:nth-child(3n) { color: red; }

Таким образом пункты списка будут выбираться по следующей формуле:
3 * 0 = 0 - ничего не выбрано
3 * 1 = 3-ий пункт
3 * 2 = 6-ой пункт
и т.д.

Часть выражения "b" позволяет указать с какой позиции следует начинать выбор элементов. Допустим нам необходимо выбрать каждый третий пункт списка начиная со второго пункта в списке, для этого нам надо написать следующее выражение 3n + 2:

ul li:nth-child(3n + 2) { color: red; }

Таким образом пункты списка будут выбираться по следующей формуле:
(3 * 0) + 2 = 2-ой пункт
(3 * 1) + 2 = 5-ый пункт
(3 * 2) + 2 = 8-ой пункт
и т.д.

Пример:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Пример</title>
    <style>
      tr:nth-child(odd) td { background-color: silver; }
    </style>
  </head>
  <body>

    <table>
      <tr> <td>текст</td> </tr>
      <tr> <td>текст</td> </tr>
      <tr> <td>текст</td> </tr>
      <tr> <td>текст</td> </tr>
      <tr> <td>текст</td> </tr>
      <tr> <td>текст</td> </tr>
      <tr> <td>текст</td> </tr>
      <tr> <td>текст</td> </tr>
      <tr> <td>текст</td> </tr>
      <tr> <td>текст</td> </tr>
    </table>

  </body>
</html>

Результат данного примера:

текст