Псевдоклассы группы child

Время чтения: меньше 5 мин

Кратко

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

Пример

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

        
          
          <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>
          <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 {
  background-color: #FFD829;
}

У первого пункта списка (первого дочернего элемента) будет тёмно-зелёный фон:

        
          
          .list-item:first-child {  background-color: #064236;}
          .list-item:first-child {
  background-color: #064236;
}

У последнего пункта списка (последнего дочернего элемента) будет оранжевый фон:

        
          
          .list-item:last-child {  background-color: #ED6742;}
          .list-item:last-child {
  background-color: #ED6742;
}

У второго пункта списка будет зелёный фона:

        
          
          .list-item:nth-child(2) {  background-color: #49A16C;}
          .list-item:nth-child(2) {
  background-color: #49A16C;
}

У предпоследнего пункта списка будет розовый фон:

        
          
          .list-item:nth-last-child(2) {  background-color: #F498AD;}
          .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-child, вне зависимости от класса и типа элемента.

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