What is the difference between p:nth-child(2) and p:nth-of-type(2)?

Question

What is the difference between p:nth-child(2) and p:nth-of-type(2)?

As per W3Schools CSS Selector Reference:

• p:nth-chil

Answer 1

For p:nth-child(2) it selects the second element of its parent element if it's a paragraph whereas p:nth-of-type(2) will select the second paragraph of its parent element. If you are still confused let's make me clarify it for you. Consider the code snippet below:

   
Words
   
Little
   
Piggy
    

Here, p:nth-child(2) will select

Little

because it is the second child of its parent and it a paragraph element.

But, Here, p:nth-of-type(2) will select

Piggy

because it will select the second paragraph among all the paragraph of its parent.

Help from: https://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/