:nth-child()

Базовая Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

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

Попробуйте

Примечание: В синтаксисе 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> значения.

Синтаксис `of <selector>`

Передав в качестве аргумента селектор, мы можем выбрать n-й элемент, который соответствует этому селектору. Например, следующий селектор соответствует первым трём элементам списка, у которых установлено class="important".

:nth-child(-n + 3 of li.important) {
}

Это отличается от перемещения селектора за пределы функции, например:

li.important:nth-child(-n + 3) {
}

Этот селектор выбирает элементы списка, если они входят в число первых трёх потомков и соответствуют селектору li.important.

Примеры

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

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>, WITHOUT an <code>&lt;em&gt;</code> among
  the child elements.
</h3>
<p>Children 1, 3, 5, and 7 are selected.</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>, WITH an <code>&lt;em&gt;</code> among the
  child elements.
</h3>
<p>
  Children 1, 5, and 7 are selected.<br />
  3 is used in the counting because it is a child, but it isn't selected because
  it isn't a <code>&lt;span&gt;</code>.
</p>
<div class="second">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `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>, WITH an <code>&lt;em&gt;</code> among the
  child elements.
</h3>
<p>
  Children 1, 4, 6, and 8 are selected.<br />
  3 isn't used in the counting or selected because it is an
  <code>&lt;em&gt;</code>, not a <code>&lt;span&gt;</code>, and
  <code>nth-of-type</code> only selects children of that type. The
  <code>&lt;em&gt;</code> is completely skipped over and ignored.
</p>
<div class="third">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>

CSS

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

Результат

Использование 'of <selector>'

В этом примере представлен неупорядоченный список имён, некоторые из которых помечены как замеченные с помощью class="noted". Эти элементы выделены жирной нижней границей.

HTML

<ul>
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li>Tyrone</li>
  <li>Ricardo</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
  <li>Aylin</li>
  <li>Leo</li>
  <li>Leyla</li>
  <li class="noted">Bruce</li>
  <li>Aisha</li>
  <li>Veronica</li>
  <li class="noted">Kyouko</li>
  <li>Shireen</li>
  <li>Tanya</li>
  <li class="noted">Marlene</li>
</ul>

CSS

В следующем CSS мы нацеливаемся на четные элементы списка, которые помечены class="noted".

li:nth-child(even of .noted) {
  background-color: tomato;
  border-bottom-color: seagreen;
}

Результат

Элементы с class="noted" имеют жирную нижнюю границу, а элементы 3, 10 и 17 имеют тёмный фон, так как это четные элементы списка с class="noted".

Синтаксис селектора 'of' по сравнению с селектором nth-child

В этом примере есть два неупорядоченных списка имён. Первый список показывает эффект li:nth-child(-n + 3 of .noted), а второй — эффект li.noted:nth-child(-n + 3).

HTML

<ul class="one">
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li>Tyrone</li>
  <li>Ricardo</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
</ul>
<ul class="two">
  <li class="noted">Diego</li>
  <li>Shilpa</li>
  <li class="noted">Caterina</li>
  <li>Jayla</li>
  <li>Tyrone</li>
  <li>Ricardo</li>
  <li class="noted">Gila</li>
  <li>Sienna</li>
  <li>Titilayo</li>
  <li class="noted">Lexi</li>
</ul>

CSS

ul.one > li:nth-child(-n + 3 of .noted) {
  background-color: tomato;
  border-bottom-color: seagreen;
}

ul.two > li.noted:nth-child(-n + 3) {
  background-color: tomato;
  border-bottom-color: seagreen;
}

Результат

В первом случае стиль применяется к трём первым элементам списка с class="noted", независимо от того, являются ли они первыми тремя элементами в списке.

Во втором случае стиль применяется к элементам с class="noted" только в том случае, если они находятся среди первых трёх элементов списка.

END_OF_DOCUMENT_MARKER

Использование селектора для исправления полосатых таблиц

Распространённый способ форматирования таблиц — использование полосовой расцветки, которая чередует цвета фона строк (светлый и тёмный), что делает таблицы удобнее для чтения и более доступными. Если строка скрыта, полоски будут сливаться, искажая желаемый эффект. В этом примере показаны две таблицы с скрытой hidden строкой. Во второй таблице для обработки скрытых строк используется of :not([hidden]).

HTML

<table class="broken">
  <thead>
    <tr><th>Name</th><th>Age</th><th>Country</th></tr>
  </thead>
  <tbody>
    <tr><td>Mamitiana</td><td>23</td><td>Madagascar</td></tr>
    <tr><td>Yuki</td><td>48</td><td>Japan</td></tr>
    <tr hidden><td>Tlayolotl</td><td>36</td><td>Mexico</td></tr>
    <tr><td>Adilah</td><td>27</td><td>Morocco</td></tr>
    <tr><td>Vieno</td><td>55</td><td>Finland</td></tr>
    <tr><td>Ricardo</td><td>66</td><td>Brazil</td></tr>
  </tbody>
</table>
<table class="fixed">
  <thead>
    <tr><th>Name</th><th>Age</th><th>Country</th></tr>
  </thead>
  <tbody>
    <tr><td>Mamitiana</td><td>23</td><td>Madagascar</td></tr>
    <tr><td>Yuki</td><td>48</td><td>Japan</td></tr>
    <tr hidden><td>Tlayolotl</td><td>36</td><td>Mexico</td></tr>
    <tr><td>Adilah</td><td>27</td><td>Morocco</td></tr>
    <tr><td>Vieno</td><td>55</td><td>Finland</td></tr>
    <tr><td>Ricardo</td><td>66</td><td>Brazil</td></tr>
  </tbody>
</table>

CSS

.broken > tbody > tr:nth-child(even) {
  background-color: silver;
}

.fixed > tbody > tr:nth-child(even of :not([hidden])) {
  background-color: silver;
}

Результат

В первой таблице это просто :nth-child(even) третья строка имеет hidden атрибут. В этом случае третья строка не отображается, а вторая и четвёртая считаются чётными, что технически верно, но визуально не соответствует ожиданиям.

Во второй таблице используется синтаксис для выбора только tr строк, которые не скрыты, используя :nth-child(even of :not([hidden])).

Стиль столбца таблицы

Чтобы стилизовать столбец таблицы, нельзя задавать стиль элементу <col>, так как ячейки таблицы не являются его потомками (в отличие от строк, <tr>). Псевдоклассы, такие как :nth-child() , полезны для выбора ячеек столбца.

В этом примере мы задаём разные стили для каждого столбца.

HTML

<table>
<caption>Student roster</caption>
<colgroup>
  <col/>
  <col/>
  <col/>
</colgroup>
  <thead>
    <tr><th>Name</th><th>Age</th><th>Country</th></tr>
  </thead>
  <tbody>
    <tr><td>Mamitiana</td><td>23</td><td>Madagascar</td></tr>
    <tr><td>Yuki</td><td>48</td><td>Japan</td></tr>
  </tbody>
</table>

CSS

td {
  padding: 0.125rem 0.5rem;
  height: 3rem;
  border: 1px solid black;
}

tr :nth-child(1) {
  text-align: left;
  vertical-align: bottom;
  background-color: silver;
}

tbody tr :nth-child(2) {
  text-align: center;
  vertical-align: middle;
}

tbody tr :nth-child(3) {
  text-align: right;
  vertical-align: top;
  background-color: tomato;
}

Результат

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

Спецификация
Селекторы уровня 4 # nth-child-pseudo

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

	Десктоп					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`:nth-child`	1	12	3.5	9.5 До версии Opera 15, Opera не обрабатывает динамически добавленные элементы для `:nth-child()`.	3.1	18	4	10.1 До версии Opera 15, Opera не обрабатывает динамически добавленные элементы для `:nth-child()`.	2	1.0	≤37
`no_parent_required`	57	79	52	44	Нет	57	52	43	Нет	7.0	57
`of_syntax`	111	111	113	97	9	111	113	75	9	22.0	111

См. также

:nth-of-type()
:nth-last-child()
:has(): псевдокласс для выбора родительского элемента
Псевдоклассы для работы с древовидной структурой
Модуль CSS селекторов

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Попробуйте

Синтаксис

Ключевые значения

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

Синтаксис of <selector>

Примеры

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

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

HTML

CSS

Результат

Использование 'of <selector>'

HTML

CSS

Результат

Синтаксис селектора 'of' по сравнению с селектором nth-child

HTML

CSS

Результат

Использование селектора для исправления полосатых таблиц

HTML

CSS

Результат

Стиль столбца таблицы

HTML

CSS

Результат

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

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

См. также

Синтаксис `of <selector>`