Cómo agregar comas entre una lista de elementos dinámicamente con CSS | Programar Plus

Imagina que tienes una lista de elementos. Diga, fruta: plátano, manzana, naranja, pera, nectarina

Podríamos poner esas comas (,) en el HTML, pero veamos cómo podríamos hacerlo en CSS, dándonos un nivel extra de control. Nos aseguraremos de que el último elemento no tenga una coma mientras estamos en eso.

Necesitaba esto para un proyecto real recientemente, y parte de los requisitos era que cualquiera de los elementos de la lista pudiera ocultarse/revelarse a través de JavaScript. Las comas debían funcionar correctamente sin importar qué elementos se mostraran actualmente.

Una solución que encontré bastante elegante es usar el combinador general de hermanos. Llegaremos a eso en un minuto. Empecemos con un HTML de ejemplo. Digamos que comienzas con una lista de frutas:

<ul class="fruits">
  <li class="fruit on">Banana</li>
  <li class="fruit on">Apple</li>
  <li class="fruit on">Orange</li>
  <li class="fruit on">Pear</li>
  <li class="fruit on">Nectarine</li>
</ul>

Y algo de CSS básico para que aparezcan en una lista:

.fruits {
  display: flex;
  padding-inline-start: 0;
  list-style: none;
}

.fruit {
  display: none; /* hidden by default */
} 
.fruit.on { /* JavaScript-added class to reveal list items */
  display: inline-block;
}

Ahora digamos que suceden cosas dentro de esta interfaz, como que un usuario cambia los controles que filtran todas las frutas que crecen en climas fríos. Ahora se muestra un conjunto diferente de frutas, por lo que el fruit.on la clase se manipula con el classList API.

Hasta ahora, nuestro HTML y CSS crearían una lista como esta:

BananaOrangeNectarine

Ahora podemos alcanzar ese combinador general de hermanos para aplicar una coma y un espacio entre dos on elementos:

.fruit.on ~ .fruit.on::before {
  content: ', '; 
}

¡Bonito!

Podría estar pensando: ¿por qué no simplemente aplicar comas a todos los elementos de la lista y eliminarlos del último con algo como :last-child o :last-of-type. El problema con eso es que el último niño podría estar “apagado” en un momento dado. Entonces, lo que realmente queremos es el último elemento que está “encendido”, lo cual no es posible fácilmente en CSS, ya que no hay nada como “último de la clase” disponible. ¡Por lo tanto, el truco general del combinador de hermanos!

En la interfaz de usuario, usé max-width en vez de display y cambié eso entre 0 y un valor máximo razonable para poder usar transiciones para activar y desactivar elementos de forma más natural, lo que facilita al usuario ver qué elementos se agregan o eliminan de la lista. También puede agregar el mismo efecto al pseudoelemento para hacerlo súper suave.

Aquí hay una demostración con un par de ejemplos que son ligeras variaciones. El ejemplo de las frutas usa un hidden clase en lugar de on, y el ejemplo de verduras tiene las animaciones. SCSS también se usa aquí para anidar:

¡Espero que esto ayude a otros que buscan algo similar!