CSS INTENSIVSTATION

CSS Combinators

Combinators beschreiben die Beziehung zwischen zwei Selektoren. Sie definieren nicht nur was gestylt wird, sondern auch wie die Elemente zueinander stehen müssen.

  • div pDescendant – wählt alle Nachfahren aus, egal wie tief verschachtelt
  • div > pChild – wählt direkte Kindelemente aus
  • p + imgNext-sibling combinator – wählt das direkt folgende Geschwisterelement aus
  • p ~ imgSubsequent-sibling combinator – wählt alle nachfolgenden Geschwisterelemente aus

Descendant combinator div p

Der Descendant Combinator ist bekannt als kontextsensitiver Selektor – er wählt alle Nachfahren eines Elements, egal wie tief verschachtelt. Detailliert erklärt auf der Seite Selektoren.

<div>
    <p>blau</p>
    <section>
        <p>auch blau</p>
    </section>
</div>

div p {
    color: blue; /* alle p innerhalb von div – auch tief verschachtelte */
}

Child combinator div > p

Der Child-Kombinator (>) verbindet zwei CSS-Selektoren. Er wählt nur direkte Kindelemente eines Elements aus und berücksichtigt keine weiter verschachtelten Nachfahren.

<div>
    <p>blau – direktes Kind</p>
    <section>
        <p>nicht blau – kein direktes Kind von div</p>
    </section>
</div>

div > p {
    color: blue; /* nur direkte p-Kinder von div */
}

Ein typischer Anwendungsfall: eine verschachtelte Navigation wo nur die oberste Ebene gestylt wird.

nav > ul > li {
    background: #111;
    color: white;
    padding: 0.5rem 1rem;
}

Nur die direkte li-Ebene wird schwarz – die verschachtelten li bleiben unberührt.

Next-sibling combinator h2 + p

Der Next-sibling combinator (+) verbindet zwei CSS-Selektoren. Er wählt ein Element nur dann aus, wenn es direkt auf das vorherige Geschwisterelement folgt und beide dasselbe Elternelement haben.

<h2>Titel</h2>
<p>getroffen – direkt nach h2</p>
<p>nicht getroffen</p>

h2 + p {
    color: hotpink;
    font-weight: bold;
}

Beispiel Titel

Dieser Absatz steht direkt nach dem h2 – er wird getroffen.

Dieser Absatz nicht – er steht nicht direkt nach dem h2.

Subsequent-sibling combinator h2 ~ p

Der Subsequent-sibling combinator (~) verbindet zwei CSS-Selektoren. Er wählt alle nachfolgenden Geschwisterelemente aus, die dasselbe Elternelement haben – auch wenn sich andere Elemente dazwischen befinden.

<h2>Titel</h2>
<p>getroffen – gleiche Ebene</p>
<div>
    <p>nicht getroffen – andere Ebene</p>
</div>
<p>getroffen – gleiche Ebene, trotz div dazwischen</p>

h2 ~ p {
    color: hotpink;
    font-weight: bold;
}

Beispiel Titel

getroffen – gleiche Ebene

nicht getroffen – andere Ebene

getroffen – gleiche Ebene, trotz div dazwischen

Merksatz: ~ trifft alle nachfolgenden Geschwister – aber nur auf derselben Ebene. Elemente in einem anderen Container werden nie getroffen.

Kurz gesagt

  • Combinators beschreiben die Beziehung zwischen Elementen
  • div p = irgendwo drin, div > p = direkt drin
  • p + img = direkt danach (Next-sibling), p ~ img = alle danach (Subsequent-sibling)
  • Sibling combinators wirken nur auf Geschwister – Elemente in anderen Containern werden nie getroffen