title: Zebra-striping nested lists with CSS
body: <p>It's easy to style lists and rows with alternating backgrounds using the the <code>:nth-child(odd/even)</code> pseudo-classes, but if you try to apply it to nested lists, it starts to look hideous.</p>
  
  <p>My question is, is there any way to alternate by depth / hierarchy, where, for example, a parent color alternates with the child elements' indefinitely. Eg:</p>
  
  <ul>
  <li>red
  <ul>
  <li>blue</li>
  <li>blue
  <ul>
  <li>red</li>
  <li>red
  <ul>
  <li>blue</li>
  </ul></li>
  <li>red</li>
  </ul></li>
  <li>blue</li>
  </ul></li>
  </ul>
  
  <p><a href="http://jsfiddle.net/K3TuN/212/" rel="nofollow">jsfiddle</a></p>