von Kirsten

Nachfahre, Kind oder Geschwister? CSS-Selektoren kombinieren

Dieser Artikel ist ursprünglich am 25. 05. 2016 erschienen.
Das ist eine ganze Weile her. Der Inhalt ist womöglich nicht mehr ganz aktuell.

Quizfrage: Was ist der Unterschied zwischen diesen beiden Schreibweisen?

ul li {font-size:20px;}
ul > li {font-size:20px;}

In beiden Fällen geht es um Elemente in einer ungeordneten Liste (ul). Im ersten Beispiel werden alle Listenelemente angesprochen, im zweiten Fall nur die Listenelemente der obersten Ebene.
TLDR: Am Ende des Artikels gibt es ein CodePen mit Beispielen.

1. Descendant selector

ul li {font-size:20px;}

Das Listenelement ist ein descendant der ungeordneten Liste (ul). Descendant kann man mit „Nachfahre“ übersetzen.
Diese Kombination legt fest, dass alle Listenelemente in der Liste eine Schriftgröße von 20 Pixeln haben sollen. Egal wie viele Listenelemente es gibt und an welcher Stelle sie stehen. Diese Anweisung greift auch bei mehreren ineinander verschachtelten Listen. Alle Listenelemente sind immer 20 Pixel groß.

2. Child selector

ul > li {font-size:20px;}

Bei dieser Schreibweise ist das Listenelement ein child der ungeordneten Liste (ul), also ein Kind der Liste. Das bedeutet, dass nur die Kinder, also die direkten Nachkommen der ungeordneten Liste, 20 Pixel groß sind.
Wird in die Liste eine weitere Liste hineingeschachtelt, werden diese Elemente nicht angesprochen.

3. Adjacent sibling selector

h4 + p {font-weight:bold;}

Hier ist das Paragraph-Element (p) ein adjacent sibling der Überschrift (h4) – Überschrift und Absatz sind also Geschwister.
Mit dieser Kombination sprechen wir ein ganz bestimmtes Element an – nämlich das, was unmittelbar auf das vorhergehende Element folgt.
Im Beispiel oben wäre der erste Absatz (p) fett, der auf eine Überschrift h4 folgt. Der nächste Absatz wird nicht angesprochen (s. CodePen).

4. General sibling selector

h4 ~ p {font-weight:bold;}

Werden die Selektoren mit einem Tilde-Zeichen verbunden, ist das Paragraph-Element (p) ein general sibling der Überschrift (h4). Es werden alle p-Elemente angesprochen, die auf die auf die Überschrift h4 folgen. Voraussetzung ist, sie haben ein gemeinsames Elternelement, z.B. ein umschliessendes div.

Alle Beispiele als CodePen

See the Pen CSS Selektoren by Kirsten (@netzialist) on CodePen.0

Die neuesten Artikel

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die weitgehend inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

7 Kommentare zu “Nachfahre, Kind oder Geschwister? CSS-Selektoren kombinieren”

  • Ein super Artikel! Danke!
    Er hat mich dran erinnert, dass ich solche Kombis schon lange einsetzen wollte. Ich brauchte nur eine verständliche Anleitung.
    Mit Listen-Nachfahren usw. werde ich jetzt anfangen. Dein Tutorial gibt mir den nötigen Stubs. Klasse! :-)

    Könntest du auch Beispiele zu Tabellenselektoren schreiben, z.B. um einzelne Spalten farblich zu hinterlegen und ihnen eine Breite zuzuordnen? Oder wie sollte das gelöst werden? Toll wären auch weitere Links zu ähnlichen deutschen Tutorials.

    • Hallo, Christino,
      ich hab noch ein paar Artikel in Petto. Das, womit man Tabellenzeilen abwechselnd farblich hinterlegen kann (nth-child), kommt auch noch dran.

  • Ach … die Sibling-Selektoren kannte ich noch gar nicht. Weisst Du zufällig seit wann die Teil des CSS-Standards sind? Und: Kann jQuery das auch?

    (Nicht, dass man sie öfter bräuchte … :D)

    • Hallo, Ben,
      die Kombinations-Selektoren gibt es schon recht lange, das gehört zu CSS2 wenn ich mich nicht täusche. Bei jQuery bin ich leider überfragt.

    • Mittels jQuery kann man die Elemente wie oben als CSS beschrieben ansprechen, also z.B. $(„ul > li“) usw.
      Außerdem kann man bei jQuery mittels .sibling() direkt alle Geschwister-Elemente ansprechen, also z. B. $(„div“).sibling().

Die Kommentare sind geschlossen.

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.