Do You Really Understand The Difference Between CSS Nth-of-Type and Nth-Child Selectors?

By Gregg Fine.October 4, 2022
CSS nth-of-type vs. nth-child selector tutorial

There are two structural pseudo-class selectors in CSS whose distinction can be tricky to grasp at first.

In this article, let's compare the nth-of-type and nth-child selectors to better understand the difference.

Nth-of-Type

First of all, let's look at an example of nth-of-type.

Here we have an unordered list containing four list items:

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>

Now, what if we wanted to color the second li(list item) red in our CSS?

We would write li:nth-of-type and then, in parentheses, put the number two.

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

So, what does this translate to?

"In a group of siblings of type li, select the second one."

example of selecting the second li tag using the nth-of-type CSS selector

If we had put the number four in the parentheses instead of the number two, the fourth li would have been the one selected.

example of selecting the fourth li tag using the nth-of-type CSS selector

The salient thing to note is that we're talking about a group of siblings.


Let's bump up the complexity a bit and add a second ul with two nested li's.

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>

<ul>
  <li>nested one</li>
  <li>nested two</li>
</ul>

Now, if we try selecting li:nth-of-type(2) again and applying the color red, which li's do you think will get the color?

We'll see that the second li from the first ul group and the second li from the second ul group get colored red because, each time a group of siblings occurs, the count starts again.

example of selecting the second li tags from two separate ul elements using the nth-of-type CSS selector

Nth-Child

Let's now contrast this with the way that nth-child works.

Again, let's look at the unordered list from our first example.

If we select li:nth-child(2) and apply the color red to it, we see that the second li in this group of li's gets the color red.

li:nth-child(2) {
  color: red;
}
example of selecting the second li tag using the nth-child CSS selector

So far, this seems to be doing the same thing that nth-of-type(2) did.

Is there any difference?

Yes, there is!

With nth-child, the criteria's not:

"find the second li in a group of sibling li's"

But rather:

"find the li that's the second child of a parent element"


In this case, that second li just also happens to be the second child of its parent ul.


But what if we inserted a paragraph element as the first child of the ul?

<ul>
  <p>parent</p>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>

Now which li will get the color red?

It's actually going to be the first li in the sibling group because it's the second child of the ul.

example of selecting the first li tag using the nth-child CSS selector

Just to make it clear, if we added one more p element inside the ul and did li:nth-child(2)...

<ul>
  <p>parent</p>
  <p>parent 2</p>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>

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

nothing at all would get the color red because there isn't a li here that's also the second child of a parent!

example clarifying the way that the CSS nth-child selector works

Hopefully, this helps to clarify the difference between nth-of-type and nth-child!

Check out the video below to solidify your understanding!

css nth-of-type vs nth-child video