Псевдокласс :nth-of-type()

Для каждого ребёнка браузер берёт имя его тега, собирает одноимённых соседей и нумерует их сверху вниз начиная с 1. Аргументы стандартные для nth-семейства: число, odd/even или формула An+B. Синтаксиса of S у :nth-of-type() нет – он определён только для :nth-child() и :nth-last-child(). Классический пример из документации MDN – контейнер со смешанными тегами:

<div>
  <div>Этот элемент не считается.</div>
  <p>1-й абзац.</p>
  <p class="fancy">2-й абзац.</p>
  <div>Этот элемент не считается.</div>
  <p class="fancy">3-й абзац.</p>
  <p>4-й абзац.</p>
</div>

p:nth-of-type(2n + 1) { color: red; }        /* нечётные абзацы: 1-й и 3-й */
p:nth-of-type(2n)     { color: blue; }       /* чётные абзацы: 2-й и 4-й */
p:nth-of-type(1)      { font-weight: bold; } /* первый абзац */

Оба div при подсчёте абзацев игнорируются. Сравните с :nth-child(): здесь p:nth-child(2) выберет первый абзац, потому что он второй ребёнок родителя. Классический «обман» выглядит так: span:nth-child(3) исправно красит третий span, пока вёрстка однородна, но стоит вставить в контейнер div или ссылку – и третьим ребёнком становится другой элемент, селектор молча промахивается. Такие баги всплывают после безобидной правки контента и потому особенно неприятны: стили «ломаются сами», хотя CSS никто не трогал. p:nth-of-type(3) в той же ситуации продолжит указывать на третий абзац.

p.fancy:nth-of-type(2): класс проверяется после подсчёта

Частая ошибка – ожидание, что p.fancy:nth-of-type(2) выберет «второй абзац с классом fancy». На деле подсчёт идёт только по имени тега, а составной селектор работает как пост-фильтр: сначала браузер находит второй p среди всех p, потом проверяет, есть ли у него класс fancy. В разметке выше p.fancy:nth-of-type(2n+1) выберет только 3-й абзац: он нечётный по счёту абзацев и при этом с классом. «Второй элемент с классом» через :nth-of-type() выразить нельзя – MDN прямо пишет, что «nth-of-class» этим селектором не делается. Эту задачу закрывает современный синтаксис of S: p:nth-child(2 of .fancy).

nth-child, nth-of-type и of S – что выбрать