User Avatar

Стили к элементам на основе нумерации

Описание

Псевдокласс :nth-child задаёт правила стилей для элементов, которые не содержат указанный селектор.

Синтаксис

Селектор:nth-child(odd | even | число | выражение) {...}

Дополнительно

Значение Описание
odd Все нечётные номера элементов.
even Все чётные номера элементов.
число Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.
выражение Задаётся в виде an±b, где a и b — целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2...

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

Результат для различных значений псевдокласса

Значение Номера элементов Описание
1 1 Первый элемент, является синонимом псевдокласса :first-child.
5 5 Пятый элемент.
2n 2, 4, 6, 8, 10,… Все чётные элементы, аналог значения even.
2n+1 1, 3, 5, 7, 9,… Все нечётные элементы, аналог значения odd.
3n 3, 6, 9, 12, 15,… Каждый третий элемент.
3n+2 2, 5, 8, 11, 14,… Каждый третий элемент, начиная со второго.
n+4 4, 5, 6, 7, 8,… Все элементы, кроме первых трёх.
-n+3 3, 2, 1 Первые три элемента.
5n-2 3, 8, 13, 18, 23,… —
even 2, 4, 6, 8, 10,… Все чётные элементы.
odd 1, 3, 5, 7, 9,… Все нечётные элементы.

Допустимо комбинировать два псевдокласса :nth-child для выбора диапазона элементов. Здесь будут выбраны все элементы со второго по пятый. 
:nth-child(n+2):nth-child(-n+5) { … }

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.p-test > div:nth-child(2) {
color: red;
font-weight: 900;
}
</style>
<div class='p-test'>
<div>Далеко-далеко за словесными горами в стране.</div>
<div>Далеко-далеко за словесными горами в стране.</div>
<div>Далеко-далеко за словесными горами в стране.</div>
</div>
</body>
</html>

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

Свойство backdrop-filter

Позволяет использовать визуальные эффекты. Так как это применяется ко всему за элементом, чтобы увидеть эффект, вы должны сделать элемент или его фон ...

Свойство visibility

Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которо...

Свойство scroll-behavior

Определяет поведение прокрутки внутри элемента — плавная прокрутка или мгновенный переход....

Свойство flex-flow

Является сокращённым свойством для отдельных свойств flex-direction и flex-wrap....