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

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

/* Выбор элемента <p>, если он является вторым дочерним
   элементом внутри родительского элемента */
p:nth-child(2) {font-weight: bold;}

Синтаксис

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

Результат

текст