Sie sind hier : sebastian1012.bplaced.net/ homepage-neu / tutorialscss / CSS-Selektoren-kombinieren.php

CSS-Selektoren kombinieren

Dieser Artikel ist ursprünglich am 25. 05. 2016 erschienen.
Das ist eine ganze Weile her. Der Inhalt ist wahrscheinlich nicht mehr 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