:nth-child(even/odd) selector with class [duplicate]

by

In general what you want is not possible, but there is a way to achieve the desired behavior for limited numbers of “excluded” elements: the general sibling combinator ~.

The idea is that for each occurrence of a non-.parent element subsequent .parent elements will have their colors toggled:

.parent:nth-child(odd) {
    background-color: green;
}
.parent:nth-child(even) {
    background-color: red;
}

/* after the first non-.parent, toggle colors */
li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: red;
}
li:not(.parent) ~ .parent:nth-child(even) {
    background-color: green;
}

/* after the second non-.parent, toggle again */
li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: green;
}
li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(even) {
    background-color: red;
}

See it in action.

Of course there is a limit to how far one would be willing to take this, but it’s as close as you can get with pure CSS.

More Related Contents:

  1. Understanding CSS selector priority / specificity
  2. CSS Pseudo-classes with inline styles
  3. Why do browsers match CSS selectors from right to left?
  4. How can I select the last element with a specific class, not last child inside of parent?
  5. Can I write a CSS selector selecting elements NOT having a certain class or attribute?
  6. Are class names in CSS selectors case sensitive?
  7. Is there a CSS selector for the first direct child only?
  8. Why doesn’t table > tr > td work when using the child selector?
  9. CSS selector by inline style attribute
  10. :last-child not working as expected?
  11. :not(:empty) CSS selector is not working?
  12. How to exclude particular class name in CSS selector?
  13. What is the performance impact of the universal selector?
  14. What are the priorities among CSS selectors
  15. Why is nth-child selector not working?
  16. CSS selector with period in ID
  17. Can a ::before selector be used with a ?
  18. Is it possible to use CSS vars in CSS3 selectors?
  19. What is the ::content/::slotted pseudo-element and how does it work?
  20. CSS Selector “(A or B) and C”?
  21. How can I target a specific column or row in a CSS grid layout?
  22. How do I select an element that has a certain class?
  23. CSS attribute selector does not work a href
  24. How to use nth-child for styling with a table with rowspan?
  25. CSS Selector for No-Children-But-Not-Empty
  26. Is there a CSS not equals selector?
  27. Hide element, but show CSS generated content
  28. How can I select elements in CSS by partial ID value?
  29. How can I get a specific number child using CSS?
  30. Why does .class:last-of-type not work as I expect?

Leave a Comment