:nth-of-type

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;
}

Результат

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

Specification
Selectors Level 4
# nth-of-type-pseudo

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

BCD tables only load in the browser

Смотрите также