Псевдокласс CSS `:nth-child()`

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

Попробуйте

p {
  font-weight: bold;
}

li:nth-child(-n + 3) {
  border: 2px solid orange;
  margin-bottom: 1px;
}

li:nth-child(even) {
  background-color: lightyellow;
}

<p>Track &amp; field champions:</p>
<ul>
  <li>Adhemar da Silva</li>
  <li>Wang Junxia</li>
  <li>Wilma Rudolph</li>
  <li>Babe Didrikson-Zaharias</li>
  <li>Betty Cuthbert</li>
  <li>Fanny Blankers-Koen</li>
  <li>Florence Griffith-Joyner</li>
  <li>Irena Szewinska</li>
  <li>Jackie Joyner-Kersee</li>
  <li>Shirley Strickland</li>
  <li>Carl Lewis</li>
  <li>Emil Zatopek</li>
  <li>Haile Gebrselassie</li>
  <li>Jesse Owens</li>
  <li>Jim Thorpe</li>
  <li>Paavo Nurmi</li>
  <li>Sergei Bubka</li>
  <li>Usain Bolt</li>
</ul>

Синтаксис

:nth-child([ <An+B> | even | odd ] [of <complex-selector-list>]?) {
  /* ... */
}

Параметры

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

Ключевые слова

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

* {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid tomato;
  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: 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

* {
  font-family: sans-serif;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: 1.2rem;
  padding-left: 0;
}

li {
  margin: 0.125rem;
  padding: 0.25rem;
}

li {
  border: 1px solid tomato;
}

.noted {
  border-bottom: 5px solid tomato;
}

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

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

Результат

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

Синтаксис «of selector» и селектор 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

* {
  font-family: sans-serif;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: 1.2rem;
  padding-left: 0;
}

li {
  margin: 0.125rem;
  padding: 0.25rem;
}

li {
  border: 1px solid tomato;
}

.noted {
  border-bottom: 5px solid tomato;
}

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", если они входят в число первых трёх элементов списка.

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

Распространённый способ оформления таблиц — использовать чередование светлого и тёмного фона строк («зебру»), чтобы таблицы было проще читать и сделать их доступнее. Если строка скрыта, полосы сольются, и желаемый эффект будет нарушен. В этом примере показаны две таблицы со строкой 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

body {
  display: flex;
  justify-content: space-around;
}
td {
  padding: 0.125rem 0.5rem;
}

.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. Поэтому в данном случае третья строка не отображается, а вторая и четвёртая строки считаются чётными — технически это так, но визуально нет.

Во второй таблице используется синтаксис «of», чтобы выбрать только 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;
}

Результат

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

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

См. также

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