Estilo CSS parecido a una cebra para DIV nesteds

He nested elementos DIV, para los cuales no conozco los niveles de anidación. Necesito que cada uno tenga un fondo diferente al de su padre creando colores cebra. Estoy usando solo dos fondos: oscuro y blanco. El efecto debe ser similar al estilo de los niños impares y pares en un recipiente, pero en mi caso los niños están nesteds. Puedo hacer esto con reglas para cada elemento nested como, por ejemplo:

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

Pero estoy buscando una solución más elegante. ¿Se puede hacer esto solo con CSS? ¿Necesito javascript?

Cualquier sugerencia será muy apreciada.

Editar: Estoy buscando una solución que no requiera que los elementos tengan una clase, ya que tendrán que reorganizarse con arrastrar y soltar (javascript)

ACTUALIZACIÓN: esta solución ya no es relevante dada la actualización de la pregunta. Sin embargo, lo dejé aquí para referencia.

Solo usaría las clases “par” e “impar” (o algo equivalente):

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

Y luego en el HTML:

 
...