:nth-child — CSS | MDN
CSS псевдокласс :nth-child()
находит один или более элементов, основываясь на их позиции среди группы соседних элементов.
/* Выбирает каждый четвёртый элемент среди любой группы соседних элементов */ :nth-child(4n) { color: lime; }
Псевдокласс nth-child
указывается с единственным аргументом, описывающим паттерн для выбирания элементов.
Ключевые слова
odd
Описывает элементы среди группы соседних с нечётными номерами 1, 3, 5, и т. д.
even
Описывает элементы среди группы соседних с чётными номерами 2, 4, 6, и т. д.
Функциональная запись
<An+B>
Описывает элементы среди группы соседних с номерами, соответствующими паттерну
An+B
(для каждого целого числа n >= 0). Нумерация элементов начинается с единицы. Значения
и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)
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
<h4><code>span:nth-child(2n+1)</code>, БЕЗ элемента <code><em">></code> в группе элементов-потомков.</h4> <p>Элементы 1, 3, 5 и 7 будут выбраны.</p> <div> <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> <h4><code>span:nth-child(2n+1)</code>, С элементом <code><em">></code> в группе элементов-потомков.</h4> <p>Элементы 1, 5 и 7 будут выбраны.<br> 3 используется в подсчёте потому что это элемент-потомок, но он не выбран потому что он не <code><span">></code>.</p> <div> <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> <h4><code>span:nth-of-type(2n+1)</code>, С элементом <code><em">></code> в группе элементов-потомков.</h4> <p>Элементы 1, 4, 6 и 8 будут выбраны.<br> 3 не используется в подсчёте и не выбран, потому что это <code><em">></code>, но не <code><span">></code>, а <code>nth-of-type</code> выбирает только потомков этого типа. Элемент <code><em">></code> полностью пропускается и игнорируется. </p> <div> <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
with JavaScript enabled. Enable JavaScript to view data.:nth-of-type
,:nth-last-child
Last modified: