Kombinatoren und Gruppen

Zwanzig Links in einer Navigation sollen ohne Unterstreichung sein, und eine Klasse an jedem einzelnen wäre mühsam. Kürzer geht es über die Lage im Baum. Du sagst einfach, wo die Links stehen, und sparst dir damit oft eine ganze Menge Klassen.

01 / 04Nachfahre und Kind

<ul class="liste">
  <li>Direktes Kind</li>
  <li>
    Direktes Kind mit Unterliste
    <ul>
      <li>Enkel</li>
      <li>Enkel</li>
    </ul>
  </li>
</ul>

/* Leerzeichen: alle Nachfahren, egal wie tief */
.liste li {
  color: #2563eb;
}

/* Größer-Zeichen: nur die direkten Kinder.
   Bewusst keine vererbte Eigenschaft wie font-weight:
   die reichte der Unterliste den Wert einfach weiter,
   und dann sähen alle vier gleich aus. */
.liste > li {
  border-left: 3px solid #2563eb;
  padding-left: 8px;
}

Zwischen zwei Selektoren steht hier einmal ein Leerzeichen und einmal ein Größer-Zeichen. Das macht einen großen Unterschied.

Das Leerzeichen ist der Nachfahren-Kombinator. .liste li trifft jeden Listenpunkt irgendwo unterhalb von .liste, egal wie tief verschachtelt. Für diese Punkte ist .liste damit ein Vorfahre, ein Element irgendwo über ihnen. Auf der Seite sind deshalb alle vier Punkte blau, auch die beiden in der Unterliste.

Das Größer-Zeichen meint nur direkte Kinder. .liste > li trifft die beiden Punkte auf der ersten Ebene, die Enkel nicht. Deshalb haben nur die oberen beiden den Balken links.

Dort steht mit Absicht ein Rahmen und nicht etwa font-weight. Eine vererbte Eigenschaft würde die Unterliste mitnehmen. Der Selektor trifft sie zwar nicht, aber ihr Elternteil gibt den Wert weiter. Am Ende sähen alle vier gleich aus. Wie das Vererben funktioniert, steht in Abschnitt 3.

Diese Unterscheidung ist keine Feinheit für Fortgeschrittene. Du brauchst sie, sobald du eine Navigation mit Untermenü baust oder eine verschachtelte Liste gestaltest, denn dann hängt genau davon ab, wo deine Regel landet.

Ich nehme das Leerzeichen, wenn die Tiefe egal ist, und das Größer-Zeichen, wenn eine zweite Ebene anders aussehen soll.

02 / 04Geschwister

<h2>Erste Überschrift</h2>
<p>Direkt nach der Überschrift.</p>
<p>Der zweite Absatz.</p>
<p>Der dritte Absatz.</p>
<h2>Zweite Überschrift</h2>
<p>Wieder direkt nach einer Überschrift.</p>

/* Plus: nur das direkt folgende Geschwister */
h2 + p {
  font-size: 20px;
  color: #2563eb;
}

/* Tilde: alle folgenden Geschwister */
h2 ~ p {
  border-left: 3px solid #e4e4e7;
  padding-left: 12px;
}

Zwei weitere Kombinatoren gehen nicht nach unten, sondern bleiben auf derselben Ebene.

Das Plus trifft das direkt folgende Geschwister. h2 + p meint jeden Absatz, der unmittelbar nach einer Überschrift kommt. Im Markup stehen zwei Überschriften, und auf der Seite sind deshalb genau die beiden Absätze direkt darunter größer und blau. Der zweite und der dritte Absatz nicht.

Die Tilde trifft alle folgenden Geschwister. h2 ~ p meint jeden Absatz, der nach einer h2 auf derselben Ebene steht. Deshalb bekommen alle vier den Balken links, auch der unter der zweiten Überschrift.

Beide schauen nur nach vorn, nie zurück. Einen Kombinator für „das vorherige Geschwister“ gibt es nicht. Solche Fälle löst du entweder mit einer Klasse oder mit :has(), und das ist Thema von Lektion 2.7.

03 / 04Gruppieren mit Komma

<h1>Titel</h1>
<h2>Abschnitt</h2>
<h3>Unterabschnitt</h3>
<p>Ein Absatz zum Vergleich.</p>

h1,
h2,
h3 {
  font-family: Georgia, serif;
  color: #18181b;
}

Das Komma kürzt nur ab. h1, h2, h3 heißt, dass dieser Block für alle drei gilt, unabhängig voneinander, als stünden dort drei Regeln mit demselben Inhalt.

Ob du die Selektoren untereinander schreibst oder in eine Zeile, ist Geschmackssache. Bei fünf oder sechs Selektoren liest sich untereinander deutlich besser.

Weil das Komma so unscheinbar ist, fehlt es leicht.

<h1>Titel</h1>
<h2>Abschnitt</h2>
<h3>Unterabschnitt</h3>

h1
h2
h3 {
  color: #b91c1c;
}

Auf der Seite ist nichts rot. Ohne Kommas steht dort ein einziger Selektor, h1 h2 h3, und der meint „eine h3 innerhalb einer h2 innerhalb einer h1“. So etwas gibt es nicht, also trifft die Regel nichts. Kein Fehler, keine Meldung, nur keine Wirkung.

04 / 04Wo die Grenze liegt

Kombinatoren verführen dazu, immer genauer zu werden. main .inhalt section article > div p a trifft ganz sicher genau das Richtige, aber sobald jemand am Markup eine Ebene ändert, ist die Regel tot. Schwer zu überschreiben ist sie außerdem, denn ihre Spezifität ist hoch. Wie man die ausrechnet, steht in Abschnitt 3.

Ab vier Teilen gebe ich dem Element lieber eine Klasse. nav a statt einer Klasse an jedem Link ist ein guter Tausch, nav ul li a span keiner mehr.

In der Aufgabe trifft jeder der drei Kombinatoren eine andere Stelle, und das Markup bleibt, wie es ist.