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

.parent,
.parent + .parent + .parent,
.parent + .parent + .parent + .parent + .parent,
.parent + .parent + .parent + .parent + .parent + .parent + .parent,
.parent + .parent + .parent + .parent + .parent + .parent + .parent + .parent + .parent,
.parent + .parent + .parent + .parent + .parent + .parent + .parent + .parent + .parent + .parent + .parent
{ background-color: green; }

.parent + .parent,
.parent + .parent + .parent + .parent,
.parent + .parent + .parent + .parent + .parent + .parent,
.parent + .parent + .parent + .parent + .parent + .parent + .parent + .parent,
.parent + .parent + .parent + .parent + .parent + .parent + .parent + .parent + .parent + .parent,
.parent + .parent + .parent + .parent + .parent + .parent + .parent + .parent + .parent + .parent + .parent + .parent
{ background-color: red; }

li {
    font-size: 12px;
}

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

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