We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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' в этой спецификации.
Рекомендация Изначальное определение.

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

ВозможностьChromeEdgeFirefoxInternet ExplorerOperaSafari
Базовая поддержка1 Да3.599.53.1
ВозможностьAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Базовая поддержка2.1 ? Да49.53.1 ?

См. также

Метки документа и участники

Внесли вклад в эту страницу: dima74, BychekRU
Обновлялась последний раз: dima74,