Kombination von Selektoren
Gruppierung
Sollen für mehrere Selektoren die selben Deklarationen verwendet werden, so können diese Selektoren durch Komma getrennt vor den entsprechenden Deklarationsblock geschrieben werden:
CSS-Datei:
HTML-Datei:
Ergebnis im Browser:
Die Gruppierung funktioniert mit jeder Art von Selektoren, auch mit Klassen und Pseudoklassen (z. B. „:hover“):
CSS-Datei:
HTML-Datei:
Ergebnis im Browser:
Kombinatoren
Mit Hilfe von sog. Kombinatoren können Deklarationen für Elemente definiert werden, die in einer bestimmten Beziehung zu anderen Elementen stehen. Es gibt folgende Kombinatoren:
- Leerzeichen: Unterelement
- >: Unmittelbares Unterelement (also keine Unter-Unterelement)
- ~: Element im selben Container-Element (Geschwister-Element)
-
+: Benachbartes Element im selben Container-Element
(unmittelbares Geschwister-Element)
Mit einem Leerzeichen zwischen zwei Selektoren können Deklarationen für Elemente definiert werden, die Unterelemente (Nachfahren) eines anderen Elements sind. Dabei spielt es keine Rolle wie tief verschachtelt ein Unterelement ist, d. h. ob es ein Unterelement oder ein Unter-Unterelement usw. ist. Der Selektor links vom Leerzeichen repräsentiert dabei das übergeordnete Element und der Selektor rechts vom Leerzeichen das Element, für das die Deklaration gilt. Im folgenden Beispiel werden alle „span“-Elemente die sich unterhalb eines „div“-Elements befinden mit einer roten Textfarbe versehen:
CSS-Datei:
HTML-Datei:
Ergebnis im Browser:
Mit dem „>“-Zeichen zwischen zwei Selektoren können Deklarationen für Elemente definiert werden, die unmittelbare Unterelemente eines anderen Elements sind. Dabei werden tiefer verschachtelte Unterelemente, d. h. Unter-Unterelemente usw., nicht mit berücksichtigt. Im folgenden Beispiel wird nur das „span“-Element, das sich unmittelbar unterhalb des „div“-Elements befindet, mit einer roten Textfarbe versehen:
CSS-Datei:
HTML-Datei:
Ergebnis im Browser:
Mit dem „~“-Zeichen zwischen zwei Selektoren können Deklarationen für Elemente definiert werden, die auf gleicher Ebene bzw. im selben Container-Element wie ein anderes Element sind. Dabei werden aber nur Elemente berücksichtigt, die im HTML-Element nach dem Element stehen, dass bei der Deklaration auf der linken Seite des „~“-Zeichens steht:
CSS-Datei:
HTML-Datei:
Ergebnis im Browser:
Mit dem „+“-Zeichen zwischen zwei Selektoren können Deklarationen für Elemente definiert werden, die auf gleicher Ebene und in unmittelbarer Nachbarschaft wie ein anderes Element sind. Dabei werden auch hier nur Elemente berücksichtigt, die im HTML-Element nach dem Element stehen, dass bei der Deklaration auf der linken Seite des Kombinators („+“) steht:
CSS-Datei:
HTML-Datei:
Ergebnis im Browser:
Abschlussübung
Als Abschlussübung kannst du folgende Seite erstellen:
Verwende dabei folgende Kombinationen von Separatoren:
- „h2“-Elemente und „p“-Elemente auf gleicher Ebene und in unmittelbarer Nachbarschaft von „h2“-Elementen sollen eine dunkelgraue Textfarbe mit den RGB-Werten „64,64,64“ bekommen
- „span“-Elemente die Unterelemente von „p“-Elementen sind sollen folgende Eigenschaften bekommen:
- float: left;
- font-size: 2em;
- padding-right: 5px;
- line-height: 80%; - „span“-Elemente die Unterelemente von „div“-Elementen sind, sollen eine dunkelrote Textfarbe (RGB-Werte „126,0,32“) bekommen und kursiv dargestellt werden
- „p“-Elemente die Unterelemente von „div“-Elementen sind, sollen eine graue Textfarbe (RGB-Werte „128,128,128“) bekommen
Die Lösung kannst du dir hier herunterladen:
