Кратко
Секция статьи "Кратко"При помощи этих псевдоклассов можно удобно выбирать элементы по их порядковому номеру внутри родительского элемента.
Пример
Секция статьи "Пример"Раскрасим в разные цвета фон у пунктов списка. Обратите внимание, что у всех пунктов списка одинаковые классы, а значит, мы не сможем обратиться к отдельным пунктам при помощи селектора по классу.
<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 )
В круглых скобках мы можем указать просто цифру. Таким образом будет выбран соответствующий этой цифре дочерний элемент. Например,
выберет третий дочерний элемент, подходящий под левую часть селектора.
Но всё становится гораздо интереснее, когда мы хотим выбрать, к примеру, каждый третий элемент внутри родителя. Используем для этого формулу
. Вместо n
будет подставляться 0, затем 1, 2 и так далее. В результате умножения в скобки будет подставляться 0, 3, 6, 9, и так до тех пор, пока не закончатся дочерние элементы внутри родителя.
Пойдём дальше и попробуем выбрать каждый шестой элемент, начиная с десятого. Тут нам к умножению на n
нужно будет прибавить ещё 10, чтобы отсчёт начался не с 0, а с 10: nth
.
Псевдокласс
работает абсолютно аналогично, только счёт ведётся с конца.
Подсказки
Секция статьи "Подсказки"💡 Часто начинающие разработчики пытаются применить эти псевдоклассы к родительскому элементу. Но тут необходимо просто запомнить, что нужно применять псевдоклассы именно к дочерним элементам, из списка которых надо выбрать. При расчёте порядкового номера дочернего элемента учитываются все соседние дочерние элементы, находящиеся на одном уровне с элементом, к которому мы применяем псевдокласс
, вне зависимости от класса и типа элемента.
💡 Не надо стесняться пользоваться калькулятором NTH. Часто не получается сразу в уме составить правильную формулу.