Kombinatoren

Kind und Eltern -Elemente

Ein Kind-Element ist ein Element, das direkt innerhalb eines anderen Elements liegt. Das äußere Element ist das Eltern-Element.

1<div>
2    <h1>Überschrift</h1>
3    <p>Ein Absatz</p>
4</div>

• <div> ist das Eltern-Element.
• <h1> und <p> sind ein Kinder des <div>.

Geschwister- Elemente

Geschwister-Elemente sind Elemente, die denselben Elternknoten haben

1<div>
2    <h1>Überschrift</h1>
3    <p>Ein Absatz</p>
4</div>

<h1> und <p> sind Geschwister, weil beide direkte Kinder des <div> sind

Nachfahren-Kombinator (Leerzeichen)

Mit einem Leerzeichen werden alle Nachfahren eines Elements ausgewählt – egal, wie tief sie verschachtelt sind.

1eltern element {
2    /* CSS-Regeln */
3}

1<div>
2    <p>Erster Absatz</p>
3
4    <section>
5        <p>Zweiter Absatz</p>
6    </section>
7</div>

1div p {
2    color: blue;
3}

Kind- Kombinator (<)

Der Kind-Kombinator wählt nur direkte Kinder eines Elements aus.

Syntax

1eltern > kind {
2    /* CSS-Regeln */
3}

1<div>
2    <p>Direktes Kind</p>
3
4    <section>
5        <p>Kein direktes Kind</p>
6    </section>
7</div>

1div > p {
2    color: red;
3}

Angrenzender Geschwister-Kombinator (+)

Der angrenzende Geschwister-Kombinator (+) wählt genau ein Element aus, das direkt nach einem anderen Element auf derselben Ebene im HTML steht.

Syntax

1element1 + element2 {
2    /* CSS-Regeln */
3}

Wähle element2 nur dann aus, wenn es direkt hinter element1 steht.

1<h2>Überschrift</h2>
2<p>Erster Absatz</p>
3<p>Zweiter Absatz</p>

1h2 + p {
2    color: green;
3}

Allgemeiner Geschwister-Kombinator (~)

Der ~-Kombinator wählt alle folgenden Geschwisterelemente aus.

Syntax

1element1 ~ element2 {
2    /* CSS-Regeln */
3}

1<h2>Überschrift</h2>
2<p>Erster Absatz</p>
3<p>Zweiter Absatz</p>
4<p>Dritter Absatz</p>

1h2 ~ p {
2    color: orange;
3}