Zebra-striping nested lists with CSS

DavidG

New Member
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.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
    • bluered
    • redblue
  • red
[*]bluejsfiddle
 
Top