Zebra-like css styling для вложенных DIV

Question

У меня есть вложенные элементы DIV, для которых я не знаю уровней гнездования. Мне нужно, чтобы у каждого был другой фон, чем его родитель, создающий зебра-подобные цвета. Я использую только два фона - темный и белый. Эффект должен быть похож на стиль нечетных и четных детей в контейнере, но в моем случае дети вложены. Я могу сделать это с помощью правил для каждого вложенного элемента, таких как:

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

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

div div { 
    background-color: #fff; 
} 

div { 
    background-color: #aaa; 
} 

Но я ищу более элегантное решение. Можно ли это сделать только с помощью CSS? Мне нужен javascript?

Любые предложения будут высоко оценены.

Изменить: Я ищу решение, которое не потребует элементы иметь класс, так как они должны быть перестроены с сопротивлением & капли (JavaScript)

Answer 1

UPDATE: это решение уже не актуально учитывая обновление вопроса. Оставляем его здесь для справки.

я бы просто использовать "даже" и "нечетные" классы (или что-то эквивалент):

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

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

, а затем в HTML:

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