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

  • A+
Category:Languages

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

As per W3Schools CSS Selector Reference:

  • p:nth-child(2): Selects every <p> element that is the second child of its parent.
  • p:nth-of-type(2): Selects every <p> element that is the second <p> element of its parent.

The difference seem to be child of its parent and <p> element of its parent.

If we are already mentioning the element type as <p> in both the cases and the keyword parent establishes a parent-child relation, so what can be the difference?

 


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:

<section>    <h1>Words</h1>    <p>Little</p>    <p>Piggy</p>    <!-- Want this one --> </section> 

Here, p:nth-child(2) will select <p>Little</p> because it is the second child of its parent and it a paragraph element.

But, Here, p:nth-of-type(2) will select <p>Piggy</p> 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/

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: