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

by

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/

More Related Contents:

  1. Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
  2. Is there a CSS selector for text nodes?
  3. Can CSS detect the number of children an element has?
  4. How do I select the “last child” with a specific class name in CSS? [duplicate]
  5. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  6. Can the :not() pseudo-class have multiple arguments?
  7. How to combine class and ID in CSS selector?
  8. :first-child not working as expected
  9. What is the difference between :first-child and :first-of-type?
  10. Does CSS have a :blur selector (pseudo-class)?
  11. Specify multiple attribute selectors in CSS
  12. Should I use single or double colon notation for pseudo-elements?
  13. How to make Internet Explorer 8 to support nth child() CSS element?
  14. What does a[href^=”…”] do in CSS?
  15. Universal selector * and pseudo elements
  16. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  17. Browser support for CSS :first-child and :last-child
  18. CSS selector to get deepest element of specific class in the HTML tree
  19. CSS Specificity and Inheritance
  20. How do I get the nth child of an element using CSS2 selectors?
  21. Difference between the selectors div + p (plus) and div ~ p (tilde)
  22. What’s the difference between CSS3’s :root pseudo class and html?
  23. CSS 3 nth of type restricted to class [duplicate]
  24. CSS combinator precedence?
  25. What is caret symbol ^ used for in css when selecting elements?
  26. CSS specificity or inheritance?
  27. How to skip first child?
  28. How to select all elements whose ID starts and ends with specific strings?
  29. selector for nth nested elements
  30. Latest on CSS parent selector [duplicate]

Leave a Comment