Neueste Web-Entwicklung Tutorials
 

CSS Kombinatoren


CSS Kombinatoren

Hinweis 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 eine combinator umfassen.

Es gibt vier verschiedene Kombinatoren in CSS3:

  • Nachkomme Selektor (space)
  • Kindselektor (>)
  • benachbarte Geschwister - Selektor (+)
  • allgemeine Geschwister - Selektor (~)

Nachkomme Selector

Der Nachkomme Selektor passt auf alle Elemente, die Nachkommen eines bestimmten Elements sind.

Das folgende Beispiel wählt alle <p> Elemente innerhalb <div> Elemente:

Beispiel

div p {
    background-color: yellow;
}
Versuch es selber "

Kindselektor

Das Kind Selektor wählt alle Elemente, die die unmittelbaren Kinder eines bestimmten Elements sind.

Das folgende Beispiel wählt alle <p> Elemente, die unmittelbare Kinder eines <div> Element:

Beispiel

div > p {
    background-color: yellow;
}
Versuch es selber "

Benachbarte Geschwister Selector

Die benachbarten Geschwister-Selektor wählt alle Elemente, die die benachbarten Geschwister eines bestimmten Elements sind.

Geschwister Elemente müssen die gleiche Elternelement haben, und "benachbart" bedeutet "unmittelbar nach".

Das folgende Beispiel wählt alle <p> Elemente , die unmittelbar nach platziert werden <div> Elemente:

Beispiel

div + p {
    background-color: yellow;
}
Versuch es selber "

Allgemein Geschwister Selector

Die allgemeine Geschwister-Selektor wählt alle Elemente, die Geschwister eines bestimmten Elements sind.

Das folgende Beispiel wählt alle <p> Elemente , die Geschwister sind <div> Elemente:

Beispiel

div ~ p {
    background-color: yellow;
}
Versuch es selber "

Testen Sie sich mit Übungen!

Übung 1 » Übung 2» Übung 3 » Übung 4»