1

En mi sitio web será muy común meter elementos div dentro de otros, como jerárquicamente. (ver imagen)

Ejemplo en 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;
}

Pero el resultado fue éste: Ejemplo de lo que no busco

Nada más alejado de lo que necesito.

Entonces bien, ¿cómo podría hacer esto de forma automática?

1 respuesta 1

0

La siguiente es una manera de realizarlo con jQuery, sería interesante ver si es posible solucionarlo utilizando únicamente CSS sin alterar el DOM

El algoritmo consiste en recorrer en profundidad el DOM a través de los hijos <div>, ignorando los elementos de otro tipo, agregándole la style class even u odd según corresponda (según su nivel de profundidad). Los elementos de nivel par tendrán un background-color y los de profunidad impar otro.

El algoritmo parte de las div que son hijas directas del body.

let divTraversal = (currentDiv, level) => {
      // si es un nivel par se agrega la clase even-level
      if(level % 2 === 0){
          $(currentDiv).addClass("even-level");
      }else{
          // si es un nivel impar se le agrega la clase odd-level
          $(currentDiv).addClass("odd-level");
      }
      // se obtiene los hijos de la div que se esta procesando, para cada hijo se invoca la llamada recursiva 
      // con el mismo nivel
      const currentLevel = level + 1;
      $(currentDiv).children("div").each(function(){
         divTraversal(this, currentLevel);
      });
      // cuando no hay mas hijos por procesar culmina la llamada recursiva
};
 
 // obtener las divs hijas inmediatas de body, divs "raices"
 // para cada div raíz recorrer en profundidad 
 $("body > div").each(function(){
   divTraversal(this, 0)
 }); 
div{
    border: 2px solid black;
    padding: 5px;
    margin: 20px;
 }

.even-level{
    background-color:#DDD;
}

.odd-level{
    background-color:#f4f4f4;
}
    
p{
    background-color:grey;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
   <div>
      Nivel 1
     <div> Nivel 2
        <p> No soy un div ignorame! </p>
        <div>
           Nivel 3
        </div>
        <div>
            Nivel 3
             <p> No soy un div ignorame! </p>
            <div>
              Nivel 4
            </div>
            <div>
             Nivel 4
            </div>
        </div>
        <div>
            Nivel 3
        </div>
    </div>
    <div> 
        Nivel 2
    </div>
    <div>
         Nivel 2
    </div>
  </div>
  <div>
      Nivel 1
  </div>
  <div>
      Nivel 1
      <div>
          Nivel 2
      </div>
      <div>
          Nivel 2
      </div>
      <div>
         Nivel 2
      </div>
  </div>
  <div>
      Nivel 1
  </div>
</body>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.