nth-child and nth-of-type select different elements

:nth-child(2) means “the second child, and only match if it is also this element type”. :nth-of-type(2) means “the second one of this element type among its siblings”. They coincide only when the parent contains one kind of child, which is exactly the case people test with.

<div>
  <h2>Title</h2>
  <p>First</p>
  <p>Second</p>
</div>

p:nth-child(2)    /* matches 'First'  — it is the 2nd child */
p:nth-of-type(2)  /* matches 'Second' — it is the 2nd p    */

Add a heading to a list of paragraphs and every :nth-child rule shifts by one, which is a bug that looks like a CSS problem and is really a counting problem. Reach for :nth-of-type when the rule is about “every other paragraph”, and :nth-child only when the position within all siblings genuinely matters.