Unterschiedliche Farben für Listenzeichen

von Fries Websolutions

Listenzeichen lassen sich auf ganz verschiedenen Arten verändern und damit haben wir uns schön öfters beschäftigt. Dabei lassen sich die kleinen Kugeln, "Bullets", verändern und durch andere Zeichen ersetzen, oder ganz durch eigene Grafiken austauschen.

Es bleibt nur eine Anwendung übrig, die "Klassische Bullets", die haben aber andere Farben, als die ausgewählten Textelemente.

Aber das funktioniert nicht einfach, denn wird der: <li>-Tag verändert, dann nehmen auch Listenzeichen und Text, immer dieselbe Farbe an. Das ist eigentlich schade, doch mit einer Verschachtelung lässt es sich auch machen. Dabei werden die Textbestandteile der Aufzählung separat formatiert, wie hier zum Beispiel:

• Element 1
• Element 2
• Element 3

<ul>
<li style="color : red"><div style="color : black">Element 1</div></li>
<li style="color : green"><div style="color : black">Element 2</div></li>
<li style="color : blue"><div style="color : black">Element 3</div></li>
</ul>

So erhalten wir bunte Listenzeichen und einen einheitlich und lesbaren Text. Hier klappt das auch mit Ringen:

• Element 1
• Element 2
• Element 3

<ul type="circle">
<li style="color : red;"><div style="color : black">Element 1</div></li>
<li style="color : green"><div style="color : black">Element 2</div></li>
<li style="color : blue"><div style="color : black">Element 3</div></li>
</ul>

Keinen Unterschied kennen zum Beispiel: Drachenbrowser (Moz) und Marktbeherrscher (IE), aber auch die nordische Fröhlichkeit (Opera) spielt hier mit, aber erst ab Version 7 .

Hier sind Artikel, die uns auch interessieren werden:

Trickkiste - Listen nach eigenem Geschmack
Die Listen gehören zu den häufig verwendeten HTML Elementen, doch leider lassen sie nur einige Formatierungen zu. Doch es sind eckige und hohle Bullets, so nennt man die trennenden Symbole, dabei doch möglich.