es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo se establecen diferentes colores en cada columna utilizando CSS?

30 May, 2023 Programación

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–

View post on imgur.com

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.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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:

    .list {
  column-count: 4;
}

li:nth-child(even) {
  background-color: red;
}

li:nth-child(odd) {
  background-color: white;
}

    Aplicar el CSS anterior al código HTML dado producirá el patrón deseado de rojo y blanco, como se muestra en la imagen.

Comments are closed.