nth-of-type vs nth-child

by

The nth-child pseudo-class refers to the “Nth matched child element”, meaning if you have a structure as follows:

<div>
    <h1>Hello</h1>

    <p>Paragraph</p>

    <p>Target</p>
</div>

Then p:nth-child(2) will select the second child which is also a p (namely, the p with “Paragraph”).
p:nth-of-type will select the second matched p element, (namely, our Target p).

Here’s a great article on the subject by Chris Coyier @ CSS-Tricks.com

The reason yours breaks is because type refers to the type of element (namely, div), but the first div doesn’t match the rules you mentioned (.row .label), therefore the rule doesn’t apply.

The reason is, CSS is parsed right to left, which means the the browser first looks on the :nth-of-type(1), determines it searches for an element of type div, which is also the first of its type, that matches the .row element, and the first, .icon element. Then it reads that the element should have the .label class, which matches nothing of the above.

If you want to select the first label element, you’ll either need to wrap all of the labels in their own container, or simply use nth-of-type(3) (assuming there will always be 2 icons).

Another option, would (sadly) be to use… wait for it… jQuery:

$(function () {
    $('.row .label:first')
        .css({
            backgroundColor:"blue"
        });
});

More Related Contents:

  1. Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
  2. Can CSS detect the number of children an element has?
  3. Can the :not() pseudo-class have multiple arguments?
  4. Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS?
  5. Can I target a :before or :after pseudo-element with a sibling combinator?
  6. CSS selector – element with a given child [duplicate]
  7. What does a[href^=”…”] do in CSS?
  8. In CSS what is the difference between “.” and “#” when declaring a set of styles? [duplicate]
  9. Universal selector * and pseudo elements
  10. How to only show certain parts with CSS for Print?
  11. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  12. Are parentheses allowed in CSS selectors?
  13. Why use an attribute selector to match classes?
  14. Is it possible to use a CSS wildcard in the middle of an attribute selector?
  15. CSS selector to get deepest element of specific class in the HTML tree
  16. Can type selectors be repeated to increase specificity?
  17. CSS Specificity and Inheritance
  18. The use of /deep/ and >>> in Angular 2
  19. Vertically centering content of :before/:after pseudo-elements
  20. Difference between the selectors div + p (plus) and div ~ p (tilde)
  21. Are CSS selectors case-sensitive?
  22. Can you target an element with CSS only if 2 classes are present?
  23. CSS combinator precedence?
  24. What is caret symbol ^ used for in css when selecting elements?
  25. What is the difference between p:nth-child(2) and p:nth-of-type(2)?
  26. CSS specificity or inheritance?
  27. Can I target all tags with a single selector?
  28. What CSS selector can be used to select the first div within another div
  29. CSS Selector for not a child of element type?
  30. CSS selector based on width?

Leave a Comment