-2

Tengo un contenedor el cual tiene dentro n numero de Divs lo que pretendo realizar es que cuando se vayan agregando nuevos divs se vayan intercalando los colores de fondo de cada div.Algo asi:

<div style="width: 700px; height: 700px; background: wheat; display: flex;">
    <div style="width: 100px; height: 700px; background: yellowgreen;">
    </div>
    <div style="width: 100px; height: 700px; background: rgb(47, 201, 206);">
    </div>
    <div style="width: 100px; height: 700px; background: yellowgreen;">
    </div>
    <div style="width: 100px; height: 700px; background: rgb(47, 201, 206);">
    </div>
</div>

Alguna idea de como puedo realizar esto con los estilos de css.Por favor

2
  • No entiendo porqué tienes que hacerlo con css si dices que añades divs, ¿cómo los añades? ¿con js? ¿entonces que te impide usar el mismo js para aleatorizar el color?
    – track3r
    Commented el 18 ene. 2023 a las 22:44
  • Y si los agregas con JavaScript por favor edita tu pregunta y agrega el código y los errores que te impiden realizar lo que deseas Commented el 18 ene. 2023 a las 22:49

2 respuestas 2

3

Si se puede hacer solo con CSS usando las Pseudo-Clases y Flex-Box!

Lo que haces con Flex es adaptar los divs (rectangulos) al contenedor, independientemente de la cantidad de divs que tengas y con las pseudo clase seleccionas todos los div que sean pares y les das un color y a los impares les das otro.

*{ /* Resetea los estilos del navegador */
    margin: 0; 
    padding: 0;
    box-sizing: border-box;
}

.contenedor{ /* Le da el tamaño al contenedor y el display flex */
    display: flex;
    width: 100vw;
    height: 100vh;
}

.contenedor__item{ /* Hace que todos los div tengan el mismo tamaño y se adapten al contenedor */
    flex-grow: 1;
}

.contenedor__item:nth-of-type(odd){ /* Selecciona numeros impares*/
    background: skyblue;
}

.contenedor__item:nth-of-type(even){ /* Selecciona numeros pares */
    background: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Document</title>
</head>
<body>
    <div class="contenedor">
        <div class="contenedor__item">
        </div>
        <div class="contenedor__item">
        </div>
        <div class="contenedor__item">
        </div>
        <div class="contenedor__item">
        </div> 
        <div class="contenedor__item">
        </div>         
    </div>
</body>
</html>

3
  • Dale un me gusta si te sirve! Me ayuda para poder subir mi reputación y poder seguir ayudando al resto! El ser nuevo me limita en las respuestas que puedo dar! Commented el 19 ene. 2023 a las 2:47
  • 1
    Gracias justamente era lo que buscaba solo que no encontraba como, realice algo similar pero con los renglones de una tabla lo quise aplicar pero no me funciono. Commented el 19 ene. 2023 a las 5:05
  • Buenísimo! Porfa marca el ✓ en mi respuesta (Que significa que te soluciono el problema) así me suben la reputación y puedo seguir respondiendo consultas! Suerte! Commented el 19 ene. 2023 a las 5:09
1

Puedes usar JavaScript para lograr esto. Puedes crear un arreglo con los colores que deseas utilizar y, cada vez que agregues un nuevo div, alternar entre los colores del arreglo utilizando un índice que se incremente cada vez que se agrega un nuevo div. Por ejemplo:

let colors = ["wheat", "yellowgreen", "rgb(47, 201, 206)"];
let currentColorIndex = 0;

// Function to add a new div
function addDiv() {
    
    let container = document.getElementById("container");

    for (let index = 0; index < 3; index++) {
        let newDiv = document.createElement("div");
        newDiv.style.width = "100px";
        newDiv.style.height = "700px";
        newDiv.style.background = colors[index];
        container.appendChild(newDiv);
    }
   
}
<button onclick="addDiv()">Test</button>
<div id="container" style="width: 700px; height: 700px; display: flex;">
</div>

Tu Respuesta

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

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