Listenpunkte farbig :marker

Wenn wir mit Listen arbeiten (egal ob mit einer automatisch nummerierten Liste oder einer mit Aufzählungspunkte) erhalten die Listenpunkte (Nummerierungen) die Farbe Schwarz.

Hier unser Beispielcode in HTML für den Pizzabelag:

<ul>
    <li>Käse</li>
    <li>Tomaten</li>
    <li>Pilze</li>
</ul>

Und das Ergebnis im Browserfenster:

Über CSS können wir nun den Text unserer Aufzählung einfärben.

ul, ol {
  color: green;
}

Als Ergebnis erhalten wir nun die Schrift in Grün angezeigt.

Als Ergebnis erhalten wir nun die Schrift in Orange angezeigt. Leider werden die Listenpunkte weiterhin vom Browser in Schwarz ausgegeben!

Wollen wir nun nur die Aufzählungspunkte in einer anderen Farbe, dann hilft die CSS-Anweisung ::marker weiter:

li::marker {
  color: red;
}

Somit können wir die Listenpunkte nach Belieben einfärben. Das Ergebnis von ::marker

Die Unterstützung von verschiedenen Browserherstellern und Versionen ist brauchbar – zumal es vielleicht auch nicht so wild ist, wenn bei einer alten Version die Farbe doch unter den Tisch fallen sollte. Genau Daten zur Unterstützung gibt es unter https://caniuse.com/css-marker-pseudo

Auflistung abwechselnd einfärben

Möchte man nun in einer Aufzählung die Aufzählungspunkte abwechselnd einfärben, können wir das sehr einfach über den CSS-Selektor :nth-child(odd) und :nth-child(even)

Im folgenden Beispiel für einen Schachclub färben wird die Punkte abwechselnd in Schwarz und Weiß. Damit es sichtbar bleibt, wird der Hintergrund dunkelgrau:

Und der dazugehörige CSS-Code:

ul, ol {
  background-color: silver;
}

li::nth-child(odd),
li::nth-child(odd)::marker {
    color: white;
}

li::nth-child(even),
li::nth-child(even)::marker {
  color: black;
}

Test einer Auflistung und Listenpunkte als Regenbogen einfärben

Möchte man nun die Farben des Regenbogens in der Auflistung, kann man wie im vorherigen Beispiel arbeiten – allerdings benötigt man als CSS-Selektor dann :nth-child(x)

Anstelle des „x“ wird die Nummer des Aufzählungspunktes gesetzt. Einfach einmal testen.