Crear una lista con diferente color las filas pares e impares
<article>
<h3>Lista de ejemplo:</h3>
<ul class="lista" >
<li>Leche: Si</li>
<li>Huevo: Si</li>
<li>Gluten: No</li>
<li>Frutos con cáscara: No</li>
<li>Cacahuete: No</li>
<li>Soja: Si</li>
<li>Pescado: No</li>
<li>Crustáceos: No</li>
<li>Apio: No</li>
<li>Mostaza: No</li>
</ul>
</article>
ESTILO CON CSS
/* las filas pares las pinto de color naranja */
.lista li:nth-child(odd) {
background-color: orange;
}
/* Las filas impares las pinto de color blanco */
.lista li:nth-child(even) {
background-color: white;
}
<h3>Lista de ejemplo:</h3>
<ul class="lista" >
<li>Leche: Si</li>
<li>Huevo: Si</li>
<li>Gluten: No</li>
<li>Frutos con cáscara: No</li>
<li>Cacahuete: No</li>
<li>Soja: Si</li>
<li>Pescado: No</li>
<li>Crustáceos: No</li>
<li>Apio: No</li>
<li>Mostaza: No</li>
</ul>
</article>
ESTILO CON CSS
/* las filas pares las pinto de color naranja */
.lista li:nth-child(odd) {
background-color: orange;
}
/* Las filas impares las pinto de color blanco */
.lista li:nth-child(even) {
background-color: white;
}
Comentarios
Publicar un comentario