list-style-color - HTML Listen mit farbigen Aufzählungspunkten
Will man in HTML Dokumenten Listen mit farbigen Aufzählungspunkte haben verwendet man häufig eine kleine Grafik - zumindestens habe ich das einige Male so gemacht. Wenn das Aufzählungszeichen keine all zu ausgefallene Form oder Größe haben soll gibt es allerdings auch eine Alternative, die ich deutlich schöner finde und die ich - auch auf die Gefahr hin, dass ich der Letzte bin der das endlich entdeckt hat - hier mal kurz beschreiben möchte. Wenn man den Inhalt des <li> Elements noch einmal in ein anderes (z.B.) <span> Element einpackt, kann man dem <li> eine Farbe zuweisen und dem <span> die eigentliche Text-Farbe.
Hat man das <span> nicht im Markup, weil man z.B. den Code über eine Markup-Sprache erzeugen lässt, kann man mit jQuery und folgenden Snippet die Punkte nachträglich (und unobtrusive) einfärben:
$(document).ready(function(){ $('#content ul li').each(function(i, e) { $(e).css('color', '#900') $(e).contents().wrap('<span class="text"></span>') }) })
Im CSS sollte eine Regel definiert sein, die dem <span> mit der Klasse text die eigentliche Text-Farbe zuordnet. Statt der Liste die Farbe (hier: #900) direkt zuzuordnen könnte man natürlich auch einfach eine entsprechende Klasse setzen und die Farbe im Stylesheet definieren.