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

• p:nth-child(1): Means that is the first child of any parent and is of type paragraph.
• p:nth-of-type (1): Means that is the first appearance of the type paragraph within any parent

p:nth-child(2){background:#f00;}
p:nth-of-type(2){background:#0f0;}

   
first child
   
second child and first element of class "p"
   
third child and second element of class "p"
   
fourth child and third element of class "p"