javascript - Zebra-like css styling for nested DIVs -

javascript - Zebra-like css styling for nested DIVs -

i have nested div elements, don't know levels of nesting. need each have different background parent creating zebra-like colors. using 2 backgrounds - dark , white. effect needs similar styling odd , children in container in case children nested. can rules each nested element such as:

div div div div { background-color: #fff; } div div div { background-color: #aaa; } div div { background-color: #fff; } div { background-color: #aaa; }

but i'm looking more elegant solution. can done css? need javascript?

any suggestions much appreciated.

edit: looking solution not require elements have class, since need rearranged drag & drop (javascript)

update: solution no longer relevant given update question. leaving here reference though.

i utilize "even" , "odd" classes (or equivalent):

div.even { background-color: #fff; } div.odd { background-color: #aaa; }

and in html:

<div class="even"> <div class="odd"> <div class="even"> <div class="odd"> ... </div> </div> </div> </div>

javascript html css css3 css-selectors