Zebra-like css styling for nested DIVs

[ayarmanco]

I have nested DIV elements, for which I don't know the levels of nesting. I need each to have different background than its parent creating a zebra-like colors. I am using only two backgrounds - dark and white. The effect needs to be similar to styling odd and even children in a container but in my case the children are nested. I can do this with rules for each nested element such as:\[code\]div div div div { background-color: #fff;}div div div { background-color: #aaa;}div div { background-color: #fff;}div { background-color: #aaa;}\[/code\]But I'm looking for more elegant solution.Can this be done only with CSS? Do I need javascript?Any suggestions will be much appreciated.Edit: I am looking for a solution which will not require the elements to have a class, since they will need to be rearranged with drag & drop (javascript)