Зебра-стиль CSS для вложенных 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?

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

Редактировать: я ищу решение, которое не требует, чтобы элементы имели класс, так как их нужно будет переставить с помощью drag & drop (javascript)

Answer 1

ОБНОВЛЕНИЕ: это решение больше не актуально, учитывая обновление вопроса.Оставив его здесь для справки.

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

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>