Zebra-striping nested lists with CSS

Question

It's easy to style lists and rows with alternating backgrounds using the the :nth-child(odd/even) pseudo-classes, but if you try to apply it to nested lists, it starts to look hideous.

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:

• red
  • blue
  • blue
    • red
    • red
      • blue
    • red
  • blue

jsfiddle

Answer 1

Short answer, no. Long answer, yes, by targeting the nested items, eg:

li:nth-child(odd) {background:blue}
li:nth-child(odd) li:nth-child(even) {background:blue}
li:nth-child(even) li:nth-child(odd) {background:blue}

But beyond 2 or three levels you're probably going to need a lot of rules.

You could do it with javascript as well, by walking down the tree and incrementing a counter, applying the style when the counter is odd or even.

Answer 2

BAM! http://jsfiddle.net/taEgL/