Kombinatoren
Diese Gruppe der Selektoren ist schon seit längerem definiert – nur der Name ist neu.
Bereits seit CSS1 und CSS2 werden zum Beispiel Kind- und Nachfahren-Selektoren beschrieben. Erst in CSS3 wurde der Begriff „Kombinator” (combinator) eingeführt, um die Zusammenhänge anschaulicher zu machen. Zusätzlich wurde ein weiterer Kombinator eingeführt (siehe Beispiele weiter unten).
In der Regel erfordern Selektoren, dass im Quellcode jedem gesondert anzusprechenden Element eine eigene ID oder Klasse zugewiesen wird, was den Quellcode vergrößert und schwieriger zu pflegen macht. Kombinatoren hingegen werten die Struktur (den hierarchischen Aufbau) eines Dokuments aus.
Betrachten wir die einzelnen Kombinatoren etwas genauer.
Nachfahren-Kombinator
| Pattern | Meaning | Description | CSS |
|---|---|---|---|
| E F | an F element descendant of an E element | Descendant combinator | 1 |
Hier werden alle Kinder und Kindeskinder (Nachfahren) eines Elements ausgewählt.
Ein klassisches Beispiel wäre #menue a {...}, in dem also alle Links innerhalb eines Menü-Containers angesprochen werden.
Möchte man nun Links in einem anderen Bereich wie zum Beispiel einem Teaser gesondert auszeichnen, kann man dies mit .teaser a {...} erreichen, ohne eine Klasse zu vergeben.
Kind-Kombinator
| Pattern | Meaning | Description | CSS |
|---|---|---|---|
| E > F | an F element child of an E element | Child combinator | 2 |
Dieser Kombinator beschreibt eine direkte Eltern-Kind-Beziehung. Die Anweisung body > p beträfe also nur Absätze, die unmittelbar auf body folgen, nicht aber Absätze, die in weiteren definierten Containern enthalten sind.
<body>
<p>...</p>
<div id="content">
<p>...</p>
</div>
<p>...</p>#content wird von der Anweisung body > p nicht erfasst.
Benachbarte-Geschwister-Kombinator
| Pattern | Meaning | Description | CSS |
|---|---|---|---|
| E + F | an F element immediately preceded by an E element | Adjacent sibling combinator | 2 |
Dieser Kombinator erfasst Elemente, die unmittelbar aufeinander folgen. Will man zum Beispiel den ersten Absatz, der auf eine Hauptüberschrift folgt, immer gefettet darstellen, könnte man folgendes anweisen:
h1 + p { font-weight: bold; }
Allgemeiner-Geschwister-Kombinator
| Pattern | Meaning | Description | CSS |
|---|---|---|---|
| E ~ F | an F element preceded by an E element | General sibling combinator | 3 |
Dies ist der mit CSS3 neu eingeführte Kombinator. Sich hierfür einen Anwendungszweck vorzustellen, fällt schon etwas schwerer, schauen wir uns aber ein einigermaßen willkürliches Beispiel an:
p ~ ul {
background-color: #900;
color: #fff;
}Diese Regel spricht alle ul-Elemente an, die Geschwister eines p-Elements sind, beide müssen also zum selben Eltern-Element gehören. Zwischen den Geschwistern dürfen andere Elemente auftauchen.
