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

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

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

Necesitaba esto para un proyecto real recientemente, y parte de los requisitos era que cualquiera de los elementos de la lista pudiera ocultarse/revelarse mediante JavaScript. Las comas debían funcionar correctamente independientemente de los elementos que se muestran actualmente.

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

ul  liBanana/li  liApple/li  liOrange/li  liPear/li  liNectarine/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 si un usuario alternara controles que filtran todas las frutas que crecen en climas fríos. Ahora se muestra un conjunto diferente de frutas, por lo que la fruit.onclase se manipula con la classListAPI.

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

BananaOrangeNectarine

Ahora podemos utilizar ese combinador general de hermanos para aplicar una coma y un espacio entre dos onelementos que quiera:

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

¡Lindo!

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

En la interfaz de usuario, use max-widthen lugar de displayy cambié eso entre 0un valor máximo razonable para poder usar transiciones para activar y desactivar elementos de manera más natural, lo que facilita al usuario ver qué elementos se agregan o eliminan de la lista. . También puedes 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 frutas usa una hiddenclase en lugar de ony el ejemplo de verduras tiene las animaciones. SCSS también se utiliza aquí para el anidamiento:

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