В чём разница между селекторами nth-of-type() и nth-child()?

Важный нюанс

Оба считают позицию среди соседей, но по-разному фильтруют тип.

Разница

• :nth-child(2) — элемент является 2-м ребёнком родителя (любой тип на позициях учитывается).
• :nth-of-type(2) — 2-й ребёнок данного тега среди соседей того же типа.

<div>
  <h2>A</h2>
  <p>B</p>
  <p>C</p>
</div>

p:nth-child(2) { }    /* B — да, второй ребёнок и это p */
p:nth-child(3) { }    /* C */
p:nth-of-type(2) { }  /* C — второй p */

Путаница возникает, когда между одинаковыми тегами вставлены другие узлы.

Итог

nth-child — позиция среди всех детей; nth-of-type — среди детей того же типа. Для «каждой второй карточки» надёжнее классы или :nth-child на однородном списке.