Kombinatoren in CSS

Kombinatoren verknüpfen zwei Selektoren und ermöglichen es, sehr präzise auf bestimmte Elemente zuzugreifen, ohne zusätzliche Klassen im HTML vergeben zu müssen.

/* Leerzeichen (Nachfahren): alle p's irgendwo in .example div */
.example div p  { background: #1b6d85; }

/* > (Kind): nur direkte Kinder p von div.example */
div.example > p { background: #1b6d85; }

/* + (Nachbar): nur das p direkt nach einem p */
p + p           { background: #1b6d85; }

/* ~ (Geschwister): alle p's die nach einem p folgen */
p ~ p           { background: #1b6d85; }

Jede der vier Sektionen unten zeigt denselben HTML-Inhalt — nur die CSS-Regel ändert sich. Die blau markierten Absätze werden von der jeweiligen Regel erfasst.

Kein Kombinator

So sieht das Beispiel ohne angewendete Kombinatoren aus

Absatz direkt in .example

Absatz direkt in .example

Absatz in verschachteltem div

Absatz in verschachteltem div

Absatz in verschachteltem div

Absatz direkt in .example

Nachfahren-Kombinator `Leerzeichen`

Alle p's, die irgendwo in einem div innerhalb von .example liegen → blau

Absatz direkt in .example (nicht erfasst)

Absatz direkt in .example (nicht erfasst)

Absatz in verschachteltem div → blau

Absatz in verschachteltem div → blau

Absatz in verschachteltem div → blau

Absatz direkt in .example (nicht erfasst)

Kind-Kombinator `>`

Nur die p's, die direkte Kinder von div.example sind → blau

Direktes Kind von .example → blau

Direktes Kind von .example → blau

In verschachteltem div (nicht erfasst)

In verschachteltem div (nicht erfasst)

In verschachteltem div (nicht erfasst)

Direktes Kind von .example → blau

Nachbar-Kombinator `+`

Nur das p, das direkt auf ein anderes p folgt → blau

Erstes p (nicht erfasst — kein p davor)

Folgt direkt auf das erste p → blau

Erstes p im div (nicht erfasst)

Folgt direkt → blau

Folgt direkt → blau

Folgt auf ein div, nicht auf ein p (nicht erfasst)

Geschwister-Kombinator `~`

Alle p's, die irgendwann nach einem p im selben Elternelement folgen → blau

Erstes p (nicht erfasst)

Zweites p → blau

Erstes p im div (nicht erfasst)

Zweites p im div → blau

Drittes p im div → blau

Nach div — kein Geschwister-p davor (nicht erfasst)