Справочник HTML & CSS

:nth-of-type()

Как `:nth-child()`, но считает только соседей с тем же тегом.

Синтаксис

selector:nth-of-type(an+b) { … }

Параметры

Параметр	Тип	Описание
n	number	Номер среди элементов этого типа.
odd \| even	keyword	Нечётные или чётные позиции среди элементов этого типа.

Примеры

Заголовок не считается, поэтому первый абзац находится правильно:

<style>
  p:first-of-type { font-weight: bold; }
  p:nth-of-type(2) { color: teal; }
</style>
 
<div>
  <h3>Heading</h3>
  <p>First paragraph — bold although it is the second child.</p>
  <p>Second paragraph.</p>
</div>

Примечания

:first-of-type и :last-of-type — короткие формы :nth-of-type(1) и :nth-last-of-type(1). Тип — это только тег, классы не учитываются.

См. также

:nth-child() — Выбирает детей по их номеру: третий, каждый чётный, каждый третий.
:first-child — Срабатывает у элемента, который стоит первым среди детей своего родителя.

В учебнике

Псевдоклассы — Стили для состояний и положения элементов — hover, focus, ссылки, first-child, nth-child, not и поля форм.

Спасибо, что читаете!