Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Advanced Selectors Pseudo-Classes: :nth-of-type and :only-of-type

Muhammad Haris Khan
Muhammad Haris Khan
8,587 Points

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

I did not get, what is significant difference between :nth-child and :nth-type? Can i anyone make it clear?

1 Answer

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

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

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:

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

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