:nth-child

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

css
/* Выбирает каждый четвёртый элемент
   среди любой группы соседних элементов */
:nth-child(4n) {
  color: lime;
}

Синтаксис

Псевдокласс nth-child указывается с единственным аргументом, описывающим паттерн для выбирания элементов.

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

odd

Описывает элементы среди группы соседних с нечётными номерами 1, 3, 5, и т. д.

even

Описывает элементы среди группы соседних с чётными номерами 2, 4, 6, и т. д.

Функциональная запись

<An+B>

Описывает элементы среди группы соседних с номерами, соответствующими паттерну An+B (для каждого целого числа n >= 0). Нумерация элементов начинается с единицы. Значения A и B должны быть <integer>s.

Формальный синтаксис

Error: could not find syntax for this item

Примеры

Примеры селекторов

tr:nth-child(odd) или tr:nth-child(2n+1)

Описывает нечётные строки HTML таблицы: 1, 3, 5, и т. д.

tr:nth-child(even) or tr:nth-child(2n)

Описывает чётные строки HTML таблицы: 2, 4, 6, и т. д.

:nth-child(7)

Описывает седьмой элемент.

:nth-child(5n)

Описывает элементы с номерами 5, 10, 15, и т. д.

:nth-child(3n+4)

Описывает элементы с номерами 4, 7, 10, 13, и т. д.

:nth-child(-n+3)

Описывает первые три элемента среди группы соседних элементов.

p:nth-child(n)

Описывает каждый элемент <p> среди группы соседних элементов. Эквивалентно простому селектору p.

p:nth-child(1) или p:nth-child(0n+1)

Описывает каждый элемент <p>, являющийся первым среди группы соседних элементов. Эквивалентно селектору :first-child.

Подробный пример

HTML

html
<h3>
  <code>span:nth-child(2n+1)</code>, БЕЗ элемента <code>&lt;em&gt;</code> в
  группе элементов-потомков.
</h3>
<p>Элементы 1, 3, 5 и 7 будут выбраны.</p>
<div class="first">
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>

<br />

<h3>
  <code>span:nth-child(2n+1)</code>, С элементом <code>&lt;em&gt;</code> в
  группе элементов-потомков.
</h3>
<p>
  Элементы 1, 5 и 7 будут выбраны.<br />
  3 используется в подсчёте потому что это элемент-потомок, но он не выбран
  потому что он не <code>&lt;span&gt;</code>.
</p>
<div class="second">
  <span>Span!</span>
  <span>Span</span>
  <em>Это `em`.</em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

<br />

<h3>
  <code>span:nth-of-type(2n+1)</code>, С элементом <code>&lt;em&gt;</code> в
  группе элементов-потомков.
</h3>
<p>
  Элементы 1, 4, 6 и 8 будут выбраны.<br />
  3 не используется в подсчёте и не выбран, потому что это
  <code>&lt;em&gt;</code>, но не <code>&lt;span&gt;</code>, а
  <code>nth-of-type</code> выбирает только потомков этого типа. Элемент
  <code>&lt;em&gt;</code> полностью пропускается и игнорируется.
</p>
<div class="third">
  <span>Span!</span>
  <span>Span</span>
  <em>Это `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>

CSS

css
html {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}

.first span:nth-child(2n + 1),
.second span:nth-child(2n + 1),
.third span:nth-of-type(2n + 1) {
  background-color: lime;
}

Результат

Спецификации

Specification
Selectors Level 4
# nth-child-pseudo

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:nth-child()
Matches elements with no parent
of <selector> syntax

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Смотрите также