:nth-child()

Псевдоклас CSS :nth-child() (дочірній номер N) дає збіг з елементами на основі їх позицій серед групи сестринських елементів.

Спробуйте його в дії

Слід зауважити, що в синтаксисі element:nth-child() підрахунок дочірніх елементів включає елементи усіх типів; проте збіг вважається збігом лише тоді, коли елемент на відповідній дочірній позиції належить до заданого типу елемента.

Синтаксис

:nth-child() приймає єдиний аргумент, що описує патерн для пошуку збігу серед індексів елементів у списку дочірніх. Індекси елементів починаються з 1.

:nth-child( <nth> [ of <complex-selector-list> ]? )

Значення – ключові слова

odd (непарний)

Представляє елементи, чия числова позиція в наборі дочірніх елементів – непарна: 1, 3, 5 тощо.

even (парний)

Представляє елементи, чия числова позиція в наборі дочірніх елементів – парна: 2, 4, 6 тощо.

Функційний запис

<An+B>

Представляє елементи, чий номер місця в наборі сестринських елементів дає збіг з патерном An+B для кожного невід'ємного значення n, де:

  • A – цілий числовий крок,
  • B – цілий числовий відступ,
  • n – всі невід'ємні цілі числа, починаючи від 0.

Такий запис можна читати так: елемент списку номер An+B. І A, і B – мусять мати значення типу <integer>.

Приклади

Приклади селекторів

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

Представляє непарні ряди таблиці HTML: 1, 3, 5 тощо.

tr:nth-child(even) чи tr:nth-child(2n)

Представляє парні ряди таблиці HTML: 2, 4, 6 тощо.

:nth-child(7)

Представляє сьомий елемент.

:nth-child(5n)

Представляє елементи номер 5 [=5×1], 10 [=5×2], 15 [=5×3] тощо. Перше значення, повернене як результат формули, – 0 [=5x0], що не дасть збігу, адже елементи індексуються від 1, тим часом n починається від 0. Це може здаватися, на перший погляд, дивним, але має більше змісту, коли врахувати, що частина формули B>0, як в наступному прикладі.

:nth-child(n+7)

Представляє сьомий і всі наступні елементи: 7 [=0+7], 8 [=1+7], 9 [=2+7] тощо.

:nth-child(3n+4)

Представляє елементи 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4] тощо.

:nth-child(-n+3)

Представляє перші три елементи. [=-0+3, -1+3, -2+3]

p:nth-child(n)

Представляє кожний елемент <p> у групі сестринських елементів. Такий запис вибирає ті самі елементи, що й простий селектор p (але має вищу за нього специфічність).

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

Представляє кожний <p>, котрий є першим елементом в групі сестринських. Це те саме, що селектор :first-child (з такою само специфічністю).

p:nth-child(n+8):nth-child(-n+15)

Представляє елементи <p> в групі сестринських – від восьмого до п'ятнадцятого.

Розгорнутий приклад

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

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

Результат

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

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
:nth-child()
Chrome Full support 1
Edge Full support 12
Firefox Full support 3.5
Internet Explorer Full support 9
Opera Full support 9.5
footnote
Safari Full support 3.1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
footnote
Safari on iOS Full support 2
Samsung Internet Full support 1.0
Matches elements with no parent
Chrome Full support 57
Edge Full support 79
Firefox Full support 52
Internet Explorer No support No
Opera Full support 44
Safari No support No
WebView Android Full support 57
Chrome Android Full support 57
Firefox for Android Full support 52
Opera Android Full support 43
Safari on iOS No support No
Samsung Internet Full support 7.0
of <selector> syntax
Chrome No support No
footnote
Edge No support No
footnote
Firefox No support No
footnote
Internet Explorer No support No
Opera No support No
Safari Full support 9
WebView Android No support No
Chrome Android No support No
Firefox for Android No support No
footnote
Opera Android No support No
Safari on iOS Full support 9
Samsung Internet No support No

Дивіться також