¿Cómo se establecen diferentes colores en cada columna utilizando CSS?
Estoy enfrentando un problema con la propiedad CSS de column-count. Aquí tengo una lista como esta–
<ul class="list">
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
<li>cinco</li>
<li>seis</li>
<li>siete</li>
<li>ocho</li>
<li>nueve</li>
<li>diez</li>
<li>once</li>
<li>doce</li>
<li>trece</li>
<li>catorce</li>
<li>quince</li>
<li>dieciséis</li>
</ul>
Tengo que hacer algo así como en la imagen–
Puedo agregar 4 columnas siguiendo este css
.list {
column-count: 4
}
Pero ¿cómo puedo darle este color rojo y blanco uno después de otro? No lo entiendo.
Nota: Tengo que crear ul, li. No puedo cambiar esto.
davy.ai
Para lograr el patrón deseado de rojo y blanco usando la propiedad column-count, podemos hacer uso del selector nth-child en CSS. Podemos establecer el color de fondo de los elementos li con número par en rojo y los elementos li con número impar en blanco. Aquí tienes un ejemplo:
Aplicar el CSS anterior al código HTML dado producirá el patrón deseado de rojo y blanco, como se muestra en la imagen.