CSS-Kombinatoren

CSS-Kombinatoren

Der Kombinator ist eine Mechanismus, der die Beziehung zwischen Wählern erklärt.

CSS-Wähler können mehrere einfache Wähler enthalten. Zwischen einfachen Wählern können wir einen Kombinatoren verwenden.

In CSS gibt es vier verschiedene Kombinatoren:

  • Nachfolgewähler (Leerzeichen)
  • Kindwähler (>)
  • Benachbarter Brüderwähler (+)
  • Universeller Brüderwähler (~)

Nachfolgewähler

Der Nachfolgewähler entspricht allen Elementen, die als Nachkommen des angegebenen Elements dienen.

Der folgende Beispiel wählt alle <p>-Elemente im <div>-Element:

Beispiel

div p {
  background-color: yellow;
}

Probieren Sie es selbst aus

Kindwähler

Der Kindwähler entspricht allen Elementen, die als Kindelemente des angegebenen Elements dienen.

Der folgende Beispiel wählt alle <p>-Elemente, die als Kindelemente des <div>-Elements dienen:

Beispiel

div > p {
  background-color: yellow;
}

Probieren Sie es selbst aus

Benachbarter Brüderwähler

Der benachbarte Brüderwähler entspricht allen Elementen, die als benachbarte gleichrangige Elemente des angegebenen Elements dienen.

Brüder (gleichrangige) Elemente müssen denselben Elternteil haben, 'benachbart' bedeutet 'unmittelbar danach'.

Der folgende Beispiel wählt alle <p>-Elemente, die unmittelbar nach dem <div>-Element folgen:

Beispiel

div + p {
  background-color: yellow;
}

Probieren Sie es selbst aus

Universeller Brüderwähler

Der universelle Brüderwähler entspricht allen Elementen, die gleichrangig zu dem angegebenen Element sind.

Der folgende Beispiel wählt alle <p>-Elemente, die gleichrangig zu dem <div>-Element sind:

Beispiel

div ~ p {
  background-color: yellow;
}

Probieren Sie es selbst aus

Alle CSS-Kombinationswähler

Wähler Beispiel Beispielbeschreibung
element element div p Wählen Sie alle <p>-Elemente im <div>-Element.
element>element div > p Wählen Sie alle <p>-Elemente aus, deren übergeordneter Element ein <div>-Element ist.
element+element div + p Wählen Sie alle <p>-Elemente aus, die unmittelbar nach einem <div>-Element folgen.
element1~element2 p ~ ul Wählen Sie jeden <ul>-Element aus, das vor einem <p>-Element steht.

Erweiternde Lektüre

Extrakurse:CSS NachkommenSelektor

Extrakurse:CSS KindelementSelektor

Extrakurse:CSS NachbarkindSelektor