/ ↲
    Расширенный поиск

    CSS

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

    Группа этих псевдоклассов позволяет выбирать элементы не по классу или тегу, а по порядковому номеру.

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

    1. Кратко
    2. Пример
    3. Как пишется
    4. Подсказки

    Кратко

    Скопировано

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

    Пример

    Скопировано

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

            
          
          <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: #286C2D;}
          .list-item:first-child {
  background-color: #286C2D;
}

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

            
          
          .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. Часто не получается сразу в уме составить правильную формулу.

    Читайте также