En mi sitio web será muy común meter elementos div dentro de otros, como jerárquicamente. (ver imagen)
En la imagen se puede apreciar lo que deseo:
- En el primer nivel de nodos (o sea, los nodos que no están dentro de otro), todos éstos tienen un mismo color (en este caso gris oscuro #DDD)
- el segundo nivel (los nodos que están dentro de los del primero), los nodos tienen color gris claro.
- al llegar al tercer nivel, los nodos vuelven a tomar el color de los del primero.
El código que usé para hacer el estilo de la imagen fue éste:
body{background-color:#D5E5F9}
.a
{
border:1px solid black;
padding:1em;
margin-bottom:1em;
background-color:#DDD;
}
.a .a
{
background-color:#f4f4f4;
}
.a .a .a
{
background-color:#DDD;
}
Pero es muy poco práctico ir poniendo .a .a .a
como tonto cuantas veces llegue a ser necesario (podrían haber muchísimos niveles). Entonces intenté con los nth-child, así:
body{background-color:#D5E5F9}
.a
{
border:1px solid black;
padding:1em;
margin-bottom:1em;
background-color:#DDD;
}
.a:nth-child(even)
{
background-color:#f4f4f4;
}
Nada más alejado de lo que necesito.
Entonces bien, ¿cómo podría hacer esto de forma automática?