:nth-of-type

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

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

Синтаксис

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

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

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

:nth-of-type( <nth> )
где 
<nth> = <an-plus-b> | even | odd

Примеры

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

HTML

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

CSS

/* Нечётные параграфы */
p:nth-of-type(2n+1) {
  color: red;
}

/* Чётные параграфы */
p:nth-of-type(2n) {
  color: blue;
}

/* Первый параграф */
p:nth-of-type(1) {
  font-weight: bold;
}

Результат

Спецификации

Спецификация Статус Комментарий
Selectors Level 4
Определение ':nth-of-type' в этой спецификации.		 Рабочий черновик Теперь выбранные элементы не обязательно должны иметь родителя.
Selectors Level 3
Определение ':nth-of-type' в этой спецификации.		 Рекомендация Изначальное определение.

Поддержка браузерами

BCD tables only load in the browser

См. также