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.
Kommentare
•
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().
•
Merci! ;o)
•
danke für den Artikel