: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><em></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><em></code> серед дочірніх
елементів.
</h3>
<p>
Вибрані дочірні елементи 1, 5 і 7.<br />
3 враховується під час підрахунку, бо є дочірнім елементом, але не
вибирається, бо не є <code><span></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><em></code> серед дочірніх
елементів.
</h3>
<p>
Вибрані дочірні елементи 1, 4, 6 і 8.<br />
3 не враховується при підрахунку і не вибирається, бо є
<code><em></code>, а не <code><span></code>, і
<code>nth-of-type</code> вибирає лише дочірні елементи відповідного типу.
<code><em></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;
}
Результат
Специфікації
Специфікація |
---|
Selectors Level 4 (Selectors 4) # nth-child-pseudo |
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
: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 | 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 | 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 | Edge No support No | Firefox No support No | 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 | Opera Android No support No | Safari on iOS Full support 9 | Samsung Internet No support No |