Comment modifier les propriétés CSS

Question

J'essaie de créer 12 colonnes en utilisant html. J'ai une classe css appelée .columnContent avec quelques propriétés dont l'une est background-color: (mis en rouge)

J'ai besoin de changer la couleur d'arrière-plan car je veux que chaque colonne ait des couleurs différentes. Comment est-ce que je change la propriété de la classe de colonne en le déclarant en html? Ou puis-je faire en utilisant div? sinon je vais devoir créer 12 classes CSS, il doit y avoir une meilleure façon de le faire.

J'ai essayé <div style="color" mais cela ne change que la couleur du texte et non la couleur d'arrière-plan des colonnes.

.columnWapprer { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.columnContent { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 1000px; 
 
    text-align: left; 
 
    margin: 3px; 
 
    background-color: red; /* <- */ 
 
}

<div id="centerContainer"> 
 
    <div class="columnWapprer"> 
 
    <div sclass="columnContent"> 
 
    </div> 
 
    <div class="columnContent"> 
 
     test 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Vous pouvez utiliser la classe :nth-child() pseudo pour appliquer les différentes couleurs à vos .columnContent éléments, à savoir:

.columnContent:nth-child(1) { background-color: green; } 
.columnContent:nth-child(2) { background-color: red; } 
.columnContent:nth-child(3) { background-color: blue; } 
/* and so on */ 

Voici un exemple de travail:

.columnWrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.columnContent { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 1000px; 
 
    text-align: left; 
 
    margin: 3px; 
 
} 
 

 
.columnContent:nth-child(1) { 
 
    background-color: green; 
 
} 
 

 
.columnContent:nth-child(2) { 
 
    background-color: red; 
 
} 
 

 
.columnContent:nth-child(3) { 
 
    background-color: blue; 
 
} 
 

 
.columnContent:nth-child(4) { 
 
    background-color: orange; 
 
}

<div id="centerContainer"> 
 
    <div class="columnWrapper"> 
 
    <div class="columnContent"></div> 
 
    <div class="columnContent"></div> 
 
    <div class="columnContent"></div> 
 
    <div class="columnContent"></div> 
 
    </div> 
 
</div>

Answer 2

Vous pouvez utiliser nième enfant comme celui-ci pour déclencher une colonne spécifique:

.collumnWapprer{ 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
.collumnContent{ 
 
position: relative; 
 
width: 200px; 
 
height: 1000px; 
 
text-align: left; 
 
margin: 3px; 
 
**background-color: red;** 
 
} 
 

 
.collumnContent:nth-child(1){ 
 
    background-color: rgba(0, 0, 0, 1); 
 
} 
 

 
.collumnContent:nth-child(2){ 
 
    background-color: rgba(0, 0, 0, 0.95); 
 
} 
 

 
.collumnContent:nth-child(3){ 
 
    background-color: rgba(0, 0, 0, 0.90); 
 
} 
 

 
.collumnContent:nth-child(4){ 
 
    background-color: rgba(0, 0, 0, 0.85); 
 
} 
 

 
.collumnContent:nth-child(5){ 
 
    background-color: rgba(0, 0, 0, 0.80); 
 
} 
 

 
.collumnContent:nth-child(6){ 
 
    background-color: rgba(0, 0, 0, 0.75); 
 
} 
 

 
.collumnContent:nth-child(7){ 
 
    background-color: rgba(0, 0, 0, 0.70); 
 
} 
 

 
.collumnContent:nth-child(8){ 
 
    background-color: rgba(0, 0, 0, 0.65); 
 
} 
 

 
.collumnContent:nth-child(9){ 
 
    background-color: rgba(0, 0, 0, 0.60); 
 
} 
 

 
.collumnContent:nth-child(10){ 
 
    background-color: rgba(0, 0, 0, 0.55); 
 
} 
 

 
.collumnContent:nth-child(11){ 
 
    background-color: rgba(0, 0, 0, 0.50); 
 
} 
 

 
.collumnContent:nth-child(12){ 
 
    background-color: rgba(0, 0, 0, 0.45); 
 
}

<div class="collumnWapprer"> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
</div>

Ou vous pouvez déclencher la première ou la dernière colonne en utilisant la première enfant, et dernière, enfant comme celui-ci:

.collumnWapprer{ 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
.collumnContent{ 
 
position: relative; 
 
width: 200px; 
 
height: 1000px; 
 
text-align: left; 
 
margin: 3px; 
 
background-color: red; 
 
} 
 

 
.collumnContent:first-child{ 
 
    background-color: blue; 
 
} 
 

 
.collumnContent:last-child{ 
 
    background-color: green; 
 
}

<div class="collumnWapprer"> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
    <div class="collumnContent"></div> 
 
</div>

Answer 3

Vous pouvez boucle en utilisant JavaScript comme:

<div id="centerContainer"> 
<div class="collumnWapprer"> 
<script> 
for (i=1; i<5; i++){ 
document.getElementById('collumnWrapper').innerHTML='<div class="collumnContent' + i + ' "> test </div>'; 
} 
</script> 

</div> 
</div> 

Ensuite, vous les style avec CSS différemment. PS: Ce n'est pas la meilleure approche pour les pages dynamiques. Si vous utilisez un langage de script côté serveur tel que PHP, vous pouvez boucler les résultats dans DIV avant de les afficher.