CSS Striping

by corymcd

HTML

<ul>
    <li class="parent">green</li>
    <li class="parent">red</li>
 <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li class="parent">green</li>
    <li class="parent">red</li>      
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li class="parent">green</li>
    <li class="parent">red</li>      
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li>ho ho ho</li>
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>    
    <li>ho ho ho</li>    
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li>ho ho ho</li> 
    <li>ho ho ho</li>    
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>    
    <li>ho ho ho</li>    
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li>ho ho ho</li> 
    <li>ho ho ho</li>    
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>   
    <li>ho ho ho</li> 
    <li>ho ho ho</li>    
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li class="parent">green</li>
    <li class="parent">red</li>      
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li class="parent">green</li>
    <li class="parent">red</li>  
    <li>ho ho ho</li> 
    <li>ho ho ho</li>    
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li class="parent">green</li>
    <li class="parent">red</li>      
    <li>ho ho ho</li> 
    <li>ho ho ho</li>    
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li class="parent">green</li>
    <li...

CSS

.odd
{ background-color: green; }

.even
{ background-color: red; }

li {
    font-size: 12px;
}

li:not(.parent) {
    font-size: 4px;
}

ul {
    width:100px;
    height: 100px;
    display: block;
}

JavaScript

// Find all objects to highlight.
$(".parent").each(function(index) {
    // For each one, peek at the previous object.
    var objPrev = $(this).prev('.parent');
    if( objPrev.hasClass('odd') ) {
        $(this).addClass('even');
    } else {
        $(this).addClass('odd');
    }    
});