Lädt...

CSS-Kombinatoren

Typ-, Klassen- und ID-Selektoren beherrschen Sie schon. Eine wichtige Fähigkeit fehlt noch: Manchmal wollen Sie nicht „alle Absätze“, sondern nur Absätze innerhalb eines Abschnitts, nur direkte Kinder einer Liste oder genau das, was unmittelbar nach einer Überschrift kommt. Dafür gibt es den Kombinator.

Was bedeutet Kombinator?

Ein Kombinator ist ein Zeichen — oder sogar nur ein Leerzeichen — zwischen zwei Selektoren. Er sagt dem Browser, welche Beziehung diese beiden Teile im HTML-Baum haben müssen. Links steht meist die „Bezugsperson“; rechts das Element, das Farbe und Schrift wirklich bekommt.

Vier häufige Kombinatoren

Merken Sie sich zuerst die Symbole; danach spüren Sie jedes kurz am Beispiel.

📊 CSS-Kombinatoren

Name Symbol Einfache Bedeutung Beispiel
Nachfahre Leerzeichen Irgendwo im Vorfahren, auch tief article p
Direktes Kind > Nur eine Ebene tiefer ul > li
Benachbartes Geschwister + Der nächste Nachbar direkt daneben h2 + p
Allgemeines Geschwister ~ Jedes spätere Geschwister auf gleicher Ebene h2 ~ p

Nachfahre — Leerzeichen zwischen zwei Selektoren

Schreiben Sie article p, heißt das: jedes <p>, das irgendwo innerhalb von <article> liegt, egal wie tief verschachtelt. Enkel und Urenkel zählen mit.

Nachfahre — Absätze in article

css
CSS Code 
article p {
color: #334155;
line-height: 1.6;
}

Wann ist der Nachfahre sinnvoll?

Wenn Sie ein gemeinsames Aussehen für „allen Text in diesem Bereich“ wollen: Absätze eines Artikels, Links in einem Menü. Wird die Verschachtelung zu wild und streut Style ungewollt, greifen Sie zu >.

Direktes Kind — >

Mit > nehmen Sie nur eine Ebene tiefer. Was zwei Ebenen tiefer sitzt, fällt durch diese Regel.

Direktes Kind — nur Listeneinträge der ersten Ebene

css
CSS Code 
.menu > li {
list-style: none;
padding: 0.5rem 1rem;
}

Ein Gedankenbeispiel

Stellen Sie sich ein Menü mit äußerem <li> und darin einer verschachtelten Liste vor. Mit .menu > li stylen nur die äußeren. Schreiben Sie .menu li (mit Leerzeichen), färben sich auch die inneren — manchmal gewollt, manchmal ein Desaster.

Benachbartes Geschwister — +

+ heißt: das Element, das direkt anschließend nach der Bezugsperson kommt, unter demselben Elternelement, ohne etwas dazwischen.

Benachbartes Geschwister — erster Absatz nach der Überschrift

css
CSS Code 
h2 + p {
font-size: 1.125rem;
color: #0f766e;
}

Ein häufiges Muster

Viele Seiten wollen den ersten Satz nach der Überschrift etwas hervorgehoben. Mit h2 + p treffen Sie genau diesen Nachbarn; Sie müssen nicht jedem Absatz eine eigene Klasse anhängen.

Allgemeines Geschwister — ~

~ will auch Geschwister, aber nicht nur den direkten Nachbarn: jedes spätere Geschwister, das zum zweiten Selektor passt.

Allgemeines Geschwister — Absätze nach der Überschrift

css
CSS Code 
h2 ~ p {
max-width: 40rem;
}

Unterschied + und ~ in einem Satz

  • h2 + p → nur der Absatz, der klebt direkt nach h2
  • h2 ~ p → jedes geschwisterliche p, das nach diesem h2 kommt
    Sitzt zwischen Überschrift und Absatz ein div, greift + für diesen Absatz nicht; ~ kann spätere Geschwister-Absätze trotzdem treffen.

Welchen wählen?

  • Alle Elemente dieser Art in einem Bereich → Nachfahre (Leerzeichen)
  • Verschachtelung erzeugt Extra-Styles → direktes Kind (>)
  • Nur der Ein-Schritt-Nachbar (Überschrift → erster Absatz) → +
  • Mehrere Geschwister nach einem Marker, gemeinsames Aussehen → ~
    Halten Sie die Kette kurz. Sehr lange Selektoren brechen schnell, wenn sich HTML ändert.

Selbst ausprobieren

  1. Bauen Sie ein <article> mit <h2>, einem <p>, einem <div> mit innerem <p>, und danach noch einem <p>.
  2. Setzen Sie article p { color: #334155; } — beide Absätze im article sollen Farbe bekommen.
  3. Ändern Sie zu article > p { color: #0f766e; } — nur direkte Kinder; das p im div nicht.
  4. Fügen Sie h2 + p { font-weight: bold; } hinzu — nur der Absatz direkt an der Überschrift wird fett.
  5. Optional: h2 ~ p { max-width: 36rem; } — alle Geschwister-Absätze nach der Überschrift.

Häufige Fehler

  • Nachfahre statt direktem Kind — verschachtelte Widgets erben Styles, die nur für die oberste Ebene gedacht waren
  • Glauben, h2 + p „springt“ über ein Zwischenelement — tut es nicht; benachbart heißt klebend
  • Den Kombinator rückwärts lesen — Styles landen auf der rechten Seite
  • Komma statt Kombinator (h2, p heißt „Überschrift und Absatz“, nicht „Absatz nach Überschrift“)
  • ~ mit „direkter Nachbar“ verwechseln — ~ heißt später auf gleicher Ebene, nicht zwingend Tür an Tür

Kurzfassung

  • Der Kombinator legt die Beziehung zweier Selektoren in HTML fest
  • Leerzeichen = Nachfahre (jede Tiefe); > = nur direktes Kind
  • + = klebendes Geschwister; ~ = jedes spätere Geschwister
  • Styles treffen den rechten Selektor
  • Wählen Sie das engste Symbol, das Ihre Absicht noch trifft
  • Auf einer kleinen Seite Leerzeichen gegen > und + gegen ~ tauschen und das Ergebnis ansehen

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
7
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 1 von 1
Css Tutorial