Problem mit li:after des "letzten" LI-Elements

[xSTVNx]

Ich habe eine Liste, deren LI-Elemente mit Komma getrennt werden sollen.

<ul>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
</ul>

li {
   display:inline;
}

li:after {
    content:",";
}

li:last [B][COLOR=#ff0000]?????[/COLOR][/B] {
    content:none;
}

Wie kann ich da denn jetzt content:none beim letzen li-Element setzen?

Mit li:last komm ich ja quasi nicht an :after ran... Gibt es da eine Möglichkeit?

Danke!
xSTVNx

 

[Tronjer]

Du könntest auf alle Listelemente mit Ausnahme des letzten zusätzlich eine Klasse legen, und den Selektor im CSS anpassen.

 

[threadi]

Schreib mal statt li:after folgendes:

li:not(:last-child):after { ..

Sollte meines Wissens in aktuellen Browsern funktionieren (also vermutlich in keinem IE).

 

[Tronjer]

Schreib mal statt li:after folgendes:

li:not(:last-child):after { ..

Das ist aber mal eine gewagte Kombination. :shock:

 

[threadi]

Entspricht aber den Vorgaben vom W3C:
Selectors Level 3

Und wird seit mindestens 2008 von allen Browsern außer dem IE unterstützt:
The CSS3 :not() selector
:not(S) » Learn CSS3 | Cheat Sheet | CSS Tutorial | Selectors | Properties

 

[xSTVNx]

li:not(:last-child):after { ..

Super! Das habe ich gesucht! Vielen Dank!

Danke auch an tronjer. :)