CodePen

HTML

            
              <h1>Even and odd, even with a hidden element</h1>

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li class="hidden"></li>
  <li class="hidden"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
            
          
!
via HTML Inspector

CSS

            
              h1{font-size: 20px;}
ul {list-style-type: none;}
li{ height: 2em; border: 1px solid black; }

li, 
li.hidden:nth-child(even) + li:nth-of-type(odd) + li:nth-of-type(even),
li.hidden:nth-child(even) + li.hidden:nth-child(odd) ~ li:nth-of-type(odd) {
    background: khaki;     
}

li:nth-child(even),
li.hidden:nth-child(even) ~ li:nth-of-type(odd), li.hidden:nth-child(even) + li.hidden:nth-child(odd) ~ li:nth-of-type(even) { 
    background: indianred; 
}

.hidden { display: none; }

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................