Select odd even child excluding the hidden child

by

:nth-child() pseudo-class looks through the children tree of the parent to match the valid child (odd, even, etc), therefore when you combine it with :not(.hidden) it won’t filter the elements properly.

Alternatively, we could fake the effect by CSS gradient as follows:

.hidden {display:none;}

.wrap {
  line-height: 1.2em;
  
  background-color: orange; 
  background-image: linear-gradient(transparent 50%, green 50%);
  background-size: 100% 2.4em;
}
<div class="wrap">
  <div class="box">xx</div>
  <div class="box">xx</div>
  <div class="box hidden">xx</div>
  <div class="box">xx</div>
  <div class="box">xx</div>
  <div class="box">xx</div>
  <div class="box">xx</div>
</div>

More Related Contents:

  1. Is there a CSS selector for elements containing certain text?
  2. What does the “~” (tilde/squiggle/twiddle) CSS selector mean?
  3. ::slotted CSS selector for nested children in shadowDOM slot
  4. nth-child doesn’t respond to class [duplicate]
  5. CSS Child vs Descendant selectors
  6. Select elements by attribute in CSS
  7. Nesting CSS classes
  8. CSS attribute selectors: The rules on quotes (“, ‘ or none?)
  9. not:first-child selector
  10. Is the CSS :not() selector supposed to work with distant descendants?
  11. What is the difference between ‘>’ and a space in CSS selectors?
  12. Combining :last-child with :not(.class) selector in CSS
  13. Why can’t you group descendants in a CSS selector?
  14. What does + mean in CSS? [duplicate]
  15. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  16. Not CSS selectors
  17. What is this CSS selector? [class*=”span”]
  18. Is there any pros and cons if i use always CSS Class instead CSS ID for everything?
  19. Is there such a thing as an “all inclusive sibling” CSS selector?
  20. CSS selector involving pseudo class first-child and dropcap
  21. Targeting position:sticky elements that are currently in a ‘stuck’ state
  22. CSS select multiple descendants of another element
  23. Select all ‘tr’ except the first one
  24. What are the rules around whitespace in attribute selectors?
  25. CSS – First child without certain class
  26. CSS select first element with a certain class
  27. Correct terms and words for sections and parts of selectors
  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