CSS- Kombinatoren
CSS-Kombinatoren
Ein Kombinator ist etwas, das die Beziehung zwischen den Selektoren erklärt.
Ein CSS-Selektor kann mehr als einen einfachen Selektor enthalten. Zwischen den einfachen Selektoren können wir einen Kombinator einfügen.
Es gibt vier verschiedene Kombinatoren in CSS:
- Nachkommenselektor (Leerzeichen)
- Kinderauswahl (>)
- Auswahl benachbarter Geschwister (+)
- allgemeine Geschwisterauswahl (~)
Nachkommen-Selektor
Der Nachkommenselektor stimmt mit allen Elementen überein, die Nachkommen eines angegebenen Elements sind.
Das folgende Beispiel wählt alle <p>-Elemente innerhalb von <div>-Elementen aus:
Beispiel
div p {
background-color: yellow;
}
Untergeordnete Auswahl (>)
Der untergeordnete Selektor wählt alle Elemente aus, die untergeordnete Elemente eines angegebenen Elements sind.
Das folgende Beispiel wählt alle <p>-Elemente aus, die Kinder eines <div>-Elements sind:
Beispiel
div > p {
background-color: yellow;
}
Auswahl benachbarter Geschwister (+)
Der nebengeordnete Selektor wird verwendet, um ein Element auszuwählen, das direkt nach einem anderen bestimmten Element liegt.
Geschwisterelemente müssen das gleiche Elternelement haben, und „benachbart“ bedeutet „unmittelbar folgend“.
Das folgende Beispiel wählt das erste <p>-Element aus, das unmittelbar nach <div>-Elementen platziert wird:
Beispiel
div + p {
background-color: yellow;
}
Allgemeine Geschwisterauswahl (~)
Der allgemeine Geschwisterselektor wählt alle Elemente aus, die nächste Geschwister eines angegebenen Elements sind.
Das folgende Beispiel wählt alle <p>-Elemente aus, die nächste Geschwister von <div>-Elementen sind:
Beispiel
div ~ p {
background-color: yellow;
}
Alle CSS-Combinator-Selektoren
| Selector | Example | Example description |
|---|---|---|
| element element | div p | Selects all <p> elements inside <div> elements |
| element>element | div > p | Selects all <p> elements where the parent is a <div> element |
| element+element | div + p | Selects the first <p> element that are placed immediately after <div> elements |
| element1~element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element |