skip to main content

:first-child / :nth-child / :last-child / :nth-last-child / :only-child

css

Кратко 🔗

При помощи этих псевдоклассов можно удобно выбирать элементы по их порядковому номеру внутри родительского элемента.

Пример 🔗

Раскрасим в разные цвета фон у пунктов списка. Обратите внимание, что у всех пунктов списка одинаковые классы, а значит мы не сможем обратиться к отдельным пунктам при помощи селектора по классу.

<ul class="list">
<li class="list-item">Темный синевато-зеленый</li>
<li class="list-item">Блестящий зелёный</li>
<li class="list-item">Блестящий зеленовато-желтый</li>
<li class="list-item">Блестящий зеленовато-желтый</li>
<li class="list-item">Блестящий зеленовато-желтый</li>
<li class="list-item">Розовый щербет</li>
<li class="list-item">Умеренный оранжевый</li>
</ul>
/* У всех пунктов списка будет жёлтый фон */
.list-item {
background-color: #FFD829;
}

/* У первого пункта списка, первого ребёнка будет тёмно-зелёный цвет фона */
.list-item:first-child {
background-color: #064236;
}

/* У последнего пункта списка, последнего ребёнка будет оранжевый цвет фона */
.list-item:last-child {
background-color: #ED6742;
}

/* У второго пункта списка будет зелёный цвет фона */
.list-item:nth-child(2) {
background-color: #49A16C;
}

/* У предпоследнего пункта списка будет розовый цвет фона */
.list-item:nth-last-child(2) {
background-color: #F498AD;
}

Как пишется 🔗

Есть три супер-простых по своей логике работы псевдокласса из этого набора:

  • :only-child — выбирает любой элемент, который является единственным ребёнком своего родителя. Можно имитировать аналогичное поведение следующими комбинациями :first-child:last-child или :nth-child(1):nth-last-child(1), но зачем так сложно, если можно проще?
  • :first-child — выбирает элемент, подходящий под левую часть селектора, являющийся первым ребёнком в своём родителе.
  • :last-child — выбирает элемент, подходящий под левую часть селектора, являющийся последним ребёнком в своём родителе.

Псевдоклассы, несущие в себе сочетание букв nth, работают гораздо интереснее. Для их правильной работы нужно указать в скобках паттерн, по которому будут выбираться дети своего родителя.

Звучит сложнее, чем работает. Начнём с простого, с ключевых слов:

  • :nth-child(odd) — выбирает нечётные элементы внутри родителя, подходящие под левую часть селектора.
  • :nth-child(even) — выбирает чётные элементы внутри родителя, подходящие под левую часть селектора.

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

Но всё становится гораздо интереснее, когда мы хотим выбрать, к примеру, каждый третий элемент внутри родителя. Используем для этого формулу :nth-child(3n). Вместо n будет подставляться 0, затем 1, 2 и так далее. В результате умножения в скобки будет подставляться 0, 3, 6, 9 и так до тех пор, пока не закончатся дети внутри родителя.

Но пойдём дальше и попробуем выбрать каждый шестой элемент, начиная с десятого. Тут нам к умножению на n нужно будет прибавить ещё 10, чтобы отсчёт начался не с 0, а с 10: nth-child(6n+10).

Псевдокласс :nth-last-child работает абсолютно аналогично, только счёт ведётся с конца.

Как это понять 🔗

Подсказки 🔗

💡 Часто начинающие разработчики пытаются применить эти псведоклассы к родительскому элементу. Но тут нужно просто запомнить, что нужно применять псевдоклассы именно к дочерним элементам, из списка которых надо выбрать элементы.

💡 Не надо стесняться пользоваться калькулятором NTH. Часто не получается сразу в уме составить правильную формулу.

Автор: Алёна,