W3docs
ru
Войти

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

Псевдокласс :nth-child() в CSS выбирает элементы по их позиции среди соседних. Синтаксис, формулы An+B и примеры.

Псевдокласс :nth-child() выбирает элементы на основе их позиции среди группы дочерних узлов. Вы передаёте ему число, ключевое слово или формулу — и он выбирает один или несколько подходящих дочерних элементов. Это позволяет оформлять каждую вторую строку таблицы, первые три пункта списка или любой повторяющийся паттерн без добавления дополнительных классов в HTML.

На этой странице рассматривается аргумент псевдокласса (odd, even и формула An+B), приводятся выполняемые примеры, а также объясняется наиболее распространённый источник путаницы: чем :nth-child() отличается от :nth-of-type().

Синтаксис

selector:nth-child(argument) {
  /* declarations */
}

argument — это одно из трёх:

  • Отдельное число, например :nth-child(3) — выбирает третий дочерний элемент.
  • Ключевое слово odd или even.
  • Формула An+B, например :nth-child(3n+1).

Отсчёт всегда начинается с 1 для первого дочернего элемента (не с 0), и учитываются все дочерние узлы, а не только те, чей тип совпадает с селектором — именно это становится источником большинства неожиданностей (см. nth-child и nth-of-type).

Ключевые слова

odd

Выбирает элементы на нечётных позициях (1, 3, 5, 7, …). Это сокращение для формулы 2n+1.

even

Выбирает элементы на чётных позициях (2, 4, 6, 8, …). Это сокращение для формулы 2n.

odd и even — основные инструменты для создания «зебры» в строках таблицы или чередования цветов элементов списка.

Функциональная нотация: An+B

Формула An+B выбирает каждый элемент, позиция которого удовлетворяет ей, где n принимает значения 0, 1, 2, 3, …:

  • A — размер цикла (количество элементов между совпадениями).
  • B — смещение (начало цикла).

Разберём :nth-child(3n+1): подставляя n = 0, 1, 2, …, получаем позиции 1, 4, 7, 10, … — каждый третий элемент, начиная с первого.

Другие полезные паттерны:

ФормулаВыбираемые позицииСмысл
:nth-child(2n)2, 4, 6, …То же, что even
:nth-child(2n+1)1, 3, 5, …То же, что odd
:nth-child(3)только 3Один фиксированный элемент
:nth-child(n+4)4, 5, 6, …Все элементы начиная с четвёртого
:nth-child(-n+3)1, 2, 3Только первые три

A и B должны быть целыми числами. Отрицательное A ведёт отсчёт в обратную сторону — именно так -n+3 выбирает только первые три дочерних элемента.

Версия

Примеры

Выбор одного элемента

Пример кода :nth-child()

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-child(3) {
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>:nth-child selector example</h2>
    <div>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <p>Paragraph 3</p>
      <p>Paragraph 4</p>
    </div>
  </body>
</html>
Попробуйте сами »

Только третий <p> получает серый фон.

Использование ключевых слов «odd» и «even»

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-child(odd) {
        background: #1c87c9;
        color: #eeeeee;
      }
      p:nth-child(even) {
        background: #666666;
        color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
  </body>
</html>
Попробуйте сами »

Использование формулы An+B

В этом примере :nth-child(3n) выделяет каждый третий элемент списка:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li:nth-child(3n) {
        background: #1c87c9;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
    </ul>
  </body>
</html>

Элементы 3 и 6 выделяются, потому что 3n принимает значения 3 и 6.

nth-child и nth-of-type

Это ловушка, в которую попадает большинство разработчиков. :nth-child() считает все дочерние узлы и затем проверяет, соответствует ли найденный элемент нужному типу. Он не считает «n-й элемент данного типа».

Рассмотрим такую разметку:

<div>
  <h2>Heading</h2>
  <p>First paragraph</p>
  <p>Second paragraph</p>
</div>

Здесь p:nth-child(2) выбирает первый <p> — потому что этот <p> занимает вторую дочернюю позицию (первая позиция — <h2>). Запись p:nth-child(1) не выберет ничего, поскольку на первой позиции находится заголовок, а не абзац.

Если вам нужен «второй абзац вне зависимости от того, что стоит перед ним», используйте :nth-of-type() — он считает только элементы того же типа.

Связанные селекторы

  • :nth-of-type() — аналог :nth-child(), но считает только дочерние элементы того же типа.
  • :nth-last-child() — та же синтаксис формулы, но отсчёт ведётся от последнего дочернего элемента.
  • :first-child и :last-child — сокращения для первого и последнего дочернего элемента.
  • CSS Selectors — обзор всех типов селекторов.

Практика

Практика
Какова функция селектора nth-child() в CSS?
Какова функция селектора nth-child() в CSS?
Was this page helpful?