Question

I’ve got a list with hidden and visible items.
The visible items have got a class called active. I am trying to apply :nth-child(odd) or –:nth-of-type(even) only to these specific visible items, but the result is totally random.

I expect: yellow, green, yellow, green, yellow.

Result: yellow, yellow, green, yellow, green, green.

I thought I would be able to filter on classname as well as node. But obviously that isn’t the case.

    <ul>
      <li>hide</li>
      <li class="active">visible</li>
      <li>hide</li>
      <li class="active">visible</li>
      <li class="active">visible</li>
      <li>hide</li>
      <li class="active">visible</li>
      <li class="active">visible</li>
      <li>hide</li>
      <li class="active">visible</li>
    </ul>

Style:

li {
   background-color:red;
   display:none;
}

li.active {
  display:block;
}

li.active:nth-child(odd) {
  background-color:yellow;
}

li.active:nth-child(even) {
  background-color:green;
}

Is there a way around this?

EDIT:
I cannot use jQuery or any other library, only native js.
In real life I have 50+ list items filled with images and text, therefore removing the invisible ones form the DOM and putting back is probably not a good idea.

Answer 1

  <li></li>                // odd , display none   
  <li class="active"></li> // even                 green
  <li></li>                // odd , display none
  <li class="active"></li> // even                 green
  <li class="active"></li> // odd                  yellow
  <li></li>                // even, display none
  <li class="active"></li> // odd                  yellow
  <li class="active"></li> // even                 green
  <li></li>                // odd , display none
  <li class="active"></li> // even                 green

what doesn’t make sense? What’re your empty <li>s for? Considering doing something different there… if they’re for spacing, add a “spacer” class to some LIs and put margin/padding on it.

---

Assuming you want the row-colors to change dynamically depending on what’s visible, you can’t do this with pure CSS. It’s simple using jQuery though, something like:

$( '#ul li:visible' ).each( function( i ){
    $( this )[ (1&i) ? 'addClass' : 'removeClass' ]( 'active' );
} )