CSS Kombinator-Selektoren

CSS-Kombinatoren

Note Kombinatoren beschreiben die Beziehung zwischen zwei Selektoren.

CSS-Kombinatoren umfassen verschiedene Möglichkeiten, einfache Selektoren zu kombinieren.

In CSS3 gibt es vier Kombinationsmethoden:

  • Nachfahrenselektor (Leerzeichen) getrennt)
  • Kindselektor (Größer-als-Zeichen)>getrennt)
  • Benachbarter Geschwisterselektor (Pluszeichen)+getrennt)
  • Allgemeiner Geschwisterselektor (Tilde)～getrennt)

Nachfahrenselektor

Der Nachfahrenselektor wird verwendet, um Nachfahren-Elemente eines Elements auszuwählen.

Das folgende Beispiel wählt alle <p>-Elemente innerhalb von <div>-Elementen aus:

Beispiel

div p { background-color:yellow; }

Selbst ausprobieren »

Kindelement-Selektor

Im Vergleich zum Nachfahrenselektor kann der Kindselektor (Kindselektoren) nur Elemente auswählen, die direkte/erststufige Kindelemente eines Elements sind.

Das folgende Beispiel wählt alle direkten Kind-<p>-Elemente des <div>-Elements aus:

Beispiel

div>p { background-color:yellow; }

Selbst ausprobieren »

Benachbarter Geschwister-Selektor

Der benachbarte Geschwister-Selektor kann ein Element auswählen, das unmittelbar auf ein anderes Element folgt, und beide haben dasselbe Elternelement.

Wenn Sie ein Element auswählen müssen, das unmittelbar auf ein anderes Element folgt, und beide dasselbe Elternelement haben, können Sie den benachbarten Geschwister-Selektor verwenden.

Das folgende Beispiel wählt das erste <p>-Element nach allen <div>-Elementen aus:

Beispiel

div+p { background-color:yellow; }

Selbst ausprobieren »

Nachfolgender Geschwister-Selektor

Der nachfolgende Geschwister-Selektor wählt alle Geschwister-Elemente aus, die auf das angegebene Element folgen.

Das folgende Beispiel wählt alle benachbarten Geschwister-<p>-Elemente nach allen <div>-Elementen aus:

Beispiel

div~p { background-color:yellow; }

Selbst ausprobieren »
Weitere Erweiterungen