Difference between :nth-child and :nth-type?

The Difference Between :nth-child and :nth-of-type - Great Example by Chris Coyier

<section>
   <p>Little</p>
   <p>Piggy</p>    <!-- Want this one -->
</section>

These will do the exact same thing:

p:nth-child(2) { color: red; }

p:nth-of-type(2) { color: red; }

There is a difference though of course.

Our :nth-child selector, in "Plain English," means select an element if:

It is a paragraph element
It is the second child of a parent

Our :nth-of-type selector, in "Plain English," means:

Select the second paragraph child of a parent

:nth-of-type is... what's a good way to say it... less conditional.

Let's say our markup changed to this:

<section>
   <h1>Words</h1>
   <p>Little</p>
   <p>Piggy</p>    <!-- Want this one -->
</section>

This breaks:

p:nth-child(2) { color: red; } /* Now incorrect */

This still works:

p:nth-of-type(2) { color: red; } /* Still works */

By "breaks", I mean that the :nth-child selector above is now selecting the word "Little" instead of "Piggy" because that element fulfills both 1) it's the second child and 2) it's a paragraph element. By "still works," I mean that "Piggy" is still being selected because it's the second paragraph under that parent element.

If we were to add an <h2> after that <h1>, the :nth-child selector wouldn't select anything at all, because now the second child is no longer a paragraph so that selector finds nothing. The :nth-of-type again still works.

I feel like :nth-of-type is less fragile and more useful in general, despite :nth-child being more common (in my eyes). How often do you think "I want to select the second child of a parent if it just happens to be a paragraph." Possibly sometimes, but more likely you want to "select the second paragraph" or "select every third table row," which are cases where :nth-of-type is (again, in my eyes) a stronger choice.

I find most of my "crap, why isn't this :nth-child selector working?!" moments are because it turns out I've tag-qualified the selector and that number child isn't really that tag. So when using :nth-child, I find it's generally best to specify the parent and leave :nth-child un-tag-qualified.

dl :nth-child(2) {  } /* is better than */
dd:nth-child(2) {  } /* this */

If you want to play around with a visual example, check out this Tool!

More details