nth-of-type vs nth-child

Question

I am a bit confused about the nth-of-type pseudo class, and how this is supposed to work - especially as compared to the nth-child class.

M

Answer 1

Heres's a simple example which shows the difference between nth-child vs nth-of-type.

Consider the following html

I am first
I am secong
I am 3rd

Using nth-of-child

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

The red background will be applied to the 2nd p element inside the div.

This happens because nth-of-child bascially means to find nth p tag(in this case 2nd p tag) inside a container

Using nth-child

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

Here no css is applied.

This happens because nth-child basically means to find nth tag inside a container(in this case 2nd tag is div) and check if it is p tag