[CSS] li-Elemente durch Kommas trennen

[BB-BF-BM]

Guten Morgen!

Ich möchte die Elemente einer Liste mit Kommas trennen.

HTML:

Code: Alles auswählen

<ul id="tags">
	<li>Tag1</li>
	<li>Tag2</li>
	<li>Tag3</li>
	<li>Tag4</li>
	<li>Tag5</li>
</ul>

Mein bisheriger CSS-Code sieht so aus:

Code: Alles auswählen

ul#tags li {
	display: inline;
}

ul#tags li:before {
	content: ', ';
}

Jetzt werden sie zwar durch Kommas getrennt, jedoch erscheint logischerweise auch vor dem ersten Listen-Element ein Komma. Dieses ist unerwünscht.
Ich hatte die Hoffnung, mit einer Kombination aus :first-child und :before das erste Komma zu entfernen, jedoch wird anscheinend keine Kombination aus beiden akzeptiert.

Die einzige Möglichkeit, die mir einfällt, ist folgende:

Code: Alles auswählen

<ul id="tags">
	<li class="firstchild">Tag1</li>
	<li>Tag2</li>
	<li>Tag3</li>
	<li>Tag4</li>
	<li>Tag5</li>
</ul>

Code: Alles auswählen

ul#tags li {
	display: inline;
}

ul#tags li:before {
	content: ', ';
}

ul#tags li.firstchild:before {
	content: '';
}

Fällt euch eine Alternative ein?

[S2B]

Ehrlich gesagt habe ich keine Ahnung, ob das überhaupt funktionieren könnte, da ich bis jetzt noch nicht mit den neuen Sektoren gearbeitet habe (Browserkompatibilität), aber vielleicht funktioniert es ja:

Code: Alles auswählen

ul#tags li + li:before {
  content: ', ';
}

[Pyramide]

Entweder das oder :first-child

[BB-BF-BM]

@S2B: danke, funktioniert zumindest im Firefox2 super!


@Pyramide: wie meinst du das?

Ich hatte die Hoffnung, mit einer Kombination aus :first-child und :before das erste Komma zu entfernen, jedoch wird anscheinend keine Kombination aus beiden akzeptiert.