:nth-of-type()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨июль 2015 г.⁩.

CSS псевдокласс:nth-of-type() находит один или более элементов с заданным тегом, основываясь на их позиции среди группы соседних элементов.

css

/* Выбирает каждый четвёртый элемент <p>   среди любой группы соседних элементов. */p:nth-of-type(4n) {  color: lime;}

Синтаксис

Псевдоклассnth-of-type указывается с единственным аргументом, описывающим паттерн для выбора элементов.

Более детальное описание синтаксиса может быть найдено на странице псевдокласса:nth-child.

Формальный синтаксис

Error: could not find syntax for this item

Примеры

Базовый пример

HTML

html

<div>  <div>Этот элемент не учитывается.</div>  <p>Первый параграф.</p>  <p>Второй параграф.</p>  <div>Этот элемент не учитывается.</div>  <p>Третий параграф.</p>  <p>Четвёртый параграф.</p></div>

CSS

css

/* Нечётные параграфы */p:nth-of-type(2n + 1) {  color: red;}/* Чётные параграфы */p:nth-of-type(2n) {  color: blue;}/* Первый параграф */p:nth-of-type(1) {  font-weight: bold;}