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

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка 1Edge Полная поддержка ДаFirefox Полная поддержка 3.5IE Полная поддержка 9Opera Полная поддержка 9.5Safari Полная поддержка 3.1WebView Android Полная поддержка 2Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка 9.5Safari iOS Полная поддержка 3.1Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Совместимость неизвестна  
Совместимость неизвестна

См. также

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

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