UL Symbol andere Farbe aber nicht auf der gesamten Seite

[maddoccc]

Hi Leute. Ich möchte die Symbold einer UL andersfarbig haben. Das funktioniert mit

li::marker { color: red; }

im Header Bereich ganz gut. Nun habe ich aber eine weitere UL wo die Farbe normal sein soll. Also nicht von dem Style betroffen sein. Ich bin leider nicht so fit in CSS. Hat jemand eine Idee für mich?

LG Madddoc

[Gunnar Bittersmann]

@@maddoccc

Nun habe ich aber eine weitere UL wo die Farbe normal sein soll. Also nicht von dem Style betroffen sein. Ich bin leider nicht so fit in CSS. Hat jemand eine Idee für mich?

Du vergibst den Listen Klassen – zumindest denen, die vom Default abweichen. Die Benennung sollte nicht danach gehen, wie die Darstellung der Liste abweicht (also nicht sowas wie „rot“), sondern warum sie abweicht (bspw. „bedrohte-tierarten“).^[1]

Du selektierst die Marker als Nachfahren der betreffenden Liste, bspw.

.bedrohte-tierarten li::marker {
  color: red;
}

Beispiel

Qapla’

---

1. Ihr habt die Ironie hier gesehen? In diesem Fall würde auch „rote-liste“ passen. ↩︎

[Rolf B]

Hallo maddoccc,

dein vorhandener Selektor ist ein verbundener Selektor (compound selector), der einen Elementtyp-Selektor (li) und einen Pseudoelementselektor (::marker) verbindet, wodurch Du das Marker-Element des Listenelement stylen kannst.

Was Gunnar gezeigt hat, ist der Nachfahren-Kombinator, der verwendet wird, um einen Klassenselektor mit deinem vorhandenen Selektor zu verbinden.

Auf diese Weise bekommst Du einen komplexen Selektor, den der Browser auf den Elternpfad jedes Elements im DOM anwendet und prüft, ob er irgendwie darauf passt.

Rolf

[maddoccc]

Der Hammer. Klassen. Damit habe ich mich immer schwergetan. Hat funktioniert. Besten Dank 😀

[Ryuno-Ki]

Moin maddoccc,

für den Fall, dass du die Listen noch einmal verschachtelst: Der Kind-Kombinator kann das Styling auf die direkten Nachfahren einschränken.

Gruß,