Стили к элементам указанного типа

Описание

Псевдокласс :nth-of-type используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child отсчёт ведётся не от первого элемента, а от последнего.

Синтаксис

Селектор:nth-of-type(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-of-type для выбора диапазона элементов. Здесь будут выбраны все элементы со второго по пятый.
:nth-of-type(n+2):nth-of-type(-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-of-type(3) {
color: red;
font-weight: 900;
}
</style>
<div class='p-test'>
<div>Далеко-далеко за словесными горами в стране.</div>
<div>Далеко-далеко за словесными горами в стране.</div>
<div>Далеко-далеко за словесными горами в стране.</div>
</div>
</body>
</html>
Далеко-далеко за словесными горами в стране.
Далеко-далеко за словесными горами в стране.
Далеко-далеко за словесными горами в стране.

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

Свойство word-spacing

Устанавливает интервал между словами. Если для текста задано выравнивание через text-align со зна...

Свойство visibility

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

Свойство list-style-position

Указывает, как будет размещаться маркер относительно текста — маркер обтекается текстом или вынес...

Свойство border-bottom-style

Устанавливает стиль границы элемента.

Свойство grid-row-start

Определяет местоположение в сетке ссылаясь на конкретные линии. <br>grid-row-start / grid-r...