: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.
CSS псевдокласс :nth-child()
находит один или более элементов, основываясь на их позиции среди группы соседних элементов.
/* Выбирает каждый четвёртый элемент
среди любой группы соседних элементов */
:nth-child(4n) {
color: lime;
}
Синтаксис
Псевдокласс nth-child
указывается с единственным аргументом, описывающим паттерн для выбирания элементов.
Ключевые слова
Функциональная запись
Формальный синтаксис
Примеры
Примеры селекторов
tr:nth-child(odd)
илиtr:nth-child(2n+1)
-
Описывает нечётные строки HTML таблицы: 1, 3, 5, и т. д.
tr:nth-child(even)
ortr: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
<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;
}
Результат
Спецификации
Specification |
---|
Selectors Level 4 # nth-child-pseudo |
Совместимость с браузерами
BCD tables only load in the browser