Wie man dynamisch Kommas zwischen einer Liste von Elementen mit CSS hinzufügt

Stellen Sie sich vor, Sie haben eine Liste von Elementen. Sagen wir, Obst: Banane, Apfel, Orange, Birne, Nektarine

Wir könnten diese Kommas (,) in den HTML-Code einfügen, aber schauen wir uns stattdessen an, wie wir das mit CSS machen könnten, was uns eine zusätzliche Kontrollebene gibt. Wir werden sicherstellen, dass das letzte Element dabei kein Komma hat.

Ich brauchte das kürzlich für ein echtes Projekt, und ein Teil der Anforderungen war, dass jedes Element in der Liste per JavaScript ein- und ausgeblendet werden konnte. Die Kommas mussten unabhängig davon, welche Elemente gerade angezeigt wurden, korrekt funktionieren.

Eine Lösung, die ich ziemlich elegant fand, ist die Verwendung des allgemeinen Geschwisterkombinators. Dazu kommen wir gleich. Beginnen wir mit einem Beispiel-HTML. Nehmen wir an, Sie beginnen mit einer Liste von Früchten

<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>

Und etwas grundlegendem CSS, damit sie als Liste erscheinen

.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;
}

Nun passieren Dinge innerhalb dieser Benutzeroberfläche, wie z. B. dass ein Benutzer Steuerelemente umschaltet, die alle Früchte herausfiltern, die in kalten Klimazonen wachsen. Nun wird eine andere Auswahl an Früchten angezeigt, so dass die Klasse fruit.on mit der classList API manipuliert wird.

Bisher würden unser HTML und CSS eine Liste wie diese erstellen

BananaOrangeNectarine

Jetzt können wir zu diesem allgemeinen Geschwisterkombinator greifen, um ein Komma und ein Leerzeichen zwischen zwei beliebigen on-Elementen anzuwenden

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

Schön!

Sie denken vielleicht: Warum nicht einfach allen Listenelementen Kommas hinzufügen und das letzte mit etwas wie :last-child oder :last-of-type entfernen. Das Problem dabei ist, dass das letzte Element zu jeder Zeit "aus" sein kann. Was wir wirklich wollen, ist das letzte sichtbare Element, was in CSS nicht einfach möglich ist, da es kein "letztes der Klasse" gibt. Daher der Trick mit dem allgemeinen Geschwisterkombinator!

In der Benutzeroberfläche habe ich max-width anstelle von display verwendet und diesen zwischen 0 und einem angemessenen Maximalwert umgeschaltet, damit ich Übergänge verwenden konnte, um Elemente natürlicher ein- und auszublenden, was es dem Benutzer erleichterte, zu sehen, welche Elemente hinzugefügt oder entfernt werden. Diesen Effekt können Sie auch auf das Pseudoelement anwenden, um ihn noch geschmeidiger zu gestalten.

Hier ist eine Demo mit einigen Beispielen, die alle leichte Variationen darstellen. Das Obstbeispiel verwendet eine hidden-Klasse anstelle von on, und das Gemüsebeispiel hat die Animationen. Hier wird auch SCSS für die Verschachtelung verwendet

Ich hoffe, das hilft anderen, die etwas Ähnliches suchen!