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

Here is an example:

    
0
    
1
    
2
    
3
    
4
    
5

this selector: div div:nth-child(1) will select the first child of the div but with another condition that child must be a div. here first child is a

0

but if the first child was a paragraph p:

0

this selector will not effect the page because there is no first child div the first child is p.

but this selector: div div:nth-of-type(1) if the first child was a

0

will effect it, but if the first child is

0

now he will effect the second child

1

because it's the first child of his type div.