nth-child vs nth-of-type explained

What they actually mean and how to remember it

There is lot of confusion about nth-child and nth-of-type in CSS community. I have seen many blogs that try to explain the difference but either they don’t fully explain it or make a mistake themselves which leads to further confusion 😭

Today, You will finally understand what is the exact algorithm that these selectors use to target the elements and how to actually remember it, to avoid any future confusion 😎

Majority of the confusion stems from the fact that when people discuss the difference between these two, they often pick a very simple example which makes the two behave very similarly 🤦‍♂️, So, let’s pick a fairly complicated (but not too complicated !) example to illustrate the difference

Here is the markup of our example in HTML

Take a moment to fully go through the markup

Not a fan of HTML ? here is the same markup in Pug:

Markup in Pug

There are 11 elements inside a container ( 5 p and 6 h1)

I have applied some CSS styling to make these 11 elements appear as squares laid out side by side. As you can see each square (element) is given a number on top, which gives its position inside the container. Remember number starts from 1 and not 0.

elements as squares

Now lets introduce our CSS selectors 👨‍🎨 :

CSS Selectors

What do you think will happen ? Which squares will have a bottom border of green ? Which squares will have a top border of red?

Try to actually figure it out before going forward. No seriously do it ✍️

Lets see the output :

Output

Surprised ? 😮

Before I explain what is going on, Let me first show you how to actually “read” the selector in your mind and what exactly it means

lets pick the first one :

.x:nth-child(even)

read from right to left

Read from right to left

From even positioned elements while considering all elements, select the ones which have class x on it

Wait what? where did the ‘child’ go? ☹️ To be honest, nth-child is a TERRIBLE name for the selector because it has nothing to do with selecting children, rather child means ‘consider all elements’ 🤷‍♂️ (and consider them as same, doesn’t matter if its h1 or p, treat them as same and just care about the position)

• Lets circle the even positions (2,4,6,8,10)
• Then mark X on the ones that has class X

Elements that has both a circle and an X is selected by our selector. (as shown by a bottom green border )

I call this conditional overlapping method, because first you select the ones that satisfy the first condition, then you select the ones that satisfy the second one. The final answer is ones that satisfy both ones.

nth-of-child

Lets see how the other one works :

.x:nth-of-type(even)

just like before, we will read it from right to left

read from right to left

Read from right to left

From even positions, considering only elements of same type select the ones that have class x on it

What? This does not make any sense 😴 ! Okay, let me explain step by step

• First of all, list out all the elements types we have : h1 and P
• Now pick even h1 and even p (Remember: we have 6 h1 and 5 p)

So, 2nd,4th and 6th h1 is even h1 (because 2,4,6 are even)

and 2nd and 4th p is even p (because 2,4 are even)

• now out of these select only which have class X on it

2nd h1 , 6th h1 and 4th p

Lets see this visually using conditional overlapping

blue arrows represent the even p (2nd and 4th), pink arrows represent the even h1 (2nd, 4th, 6th). and crosses represent elements with class X. intersection of arrows and cross is the final answer

nth-of-type

Checkout this codepen if you wanna experiment yourself

I hope now you understand the difference between the two. Got any thoughts about this? leave a comment down below >