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

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

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

        
          
          <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: #2E9AFF;}
          .list-item {
  background-color: #2E9AFF;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

        
          
          .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.