nth-child doesn’t respond to class [duplicate]

by

There’s no way to filter by class in CSS because there’s no :nth-of-class() selector. One way around this is to put your two different kinds of divs into their own groups, then select based on those groups. For example:

<div class="orange">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="red">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

With this selector:

div.red div:nth-child(2) {
    background: red;
}

Regarding the last bit of your question:

And I don’t understand why nth-child() and nth-of-type() respond differently, since there are only eight tags of the same type in the document.

For the code you give there shouldn’t be any difference. I tested it, and the two pseudo-classes work as expected. But, in general:

:nth-child() operates on an entire level of siblings without regard for any other simple selectors. Then if the nth child is not among what’s matched by the simple selectors, nothing is matched.

:nth-of-type() operates on a level of siblings of the given type without regard for other simple selectors. Then if the nth element occurring of that type is not among what’s matched by the simple selectors, nothing is matched.

More Related Contents:

  1. What does the “>” (greater-than sign) CSS selector mean?
  2. Is there a CSS selector for elements containing certain text?
  3. What does the “~” (tilde/squiggle/twiddle) CSS selector mean?
  4. nth-of-type vs nth-child
  5. css3 nth of type restricted to class [duplicate]
  6. ::slotted CSS selector for nested children in shadowDOM slot
  7. wildcard * in CSS for classes
  8. CSS Child vs Descendant selectors
  9. Matching an empty input box using CSS
  10. What is the difference between a pseudo-class and a pseudo-element in CSS?
  11. What is the difference between :first-child and :first-of-type?
  12. not:first-child selector
  13. SASS: randomly pick background-image from a list
  14. What does “i” mean in a CSS attribute selector?
  15. Is there a workaround to make CSS classes with names that start with numbers valid? [duplicate]
  16. What does + mean in CSS? [duplicate]
  17. CSS Selector for nth range?
  18. CSS selector (id contains part of text)
  19. How do I get the nth child of an element using CSS2 selectors?
  20. What’s the difference between CSS3’s :root pseudo class and html?
  21. Is the :before pseudo-element allowed on an input[type=checkbox]?
  22. CSS 3 nth of type restricted to class [duplicate]
  23. CSS select multiple descendants of another element
  24. Select all ‘tr’ except the first one
  25. What are the rules around whitespace in attribute selectors?
  26. CSS – First child without certain class
  27. CSS select first element with a certain class
  28. Correct terms and words for sections and parts of selectors
  29. CSS class repetition to increase specificity
  30. select second child

Leave a Comment