Struktur mit Pseudoklassen

Eine Trennlinie unter jedem Listenpunkt außer dem letzten, Zebrastreifen in einer Tabelle. Ohne die Pseudoklassen dieser Lektion müsstest du dafür beim Schreiben des Markups mitzählen und Klassen verteilen. Sie fragen nach der Position im Baum.

01 / 04Erstes, letztes, einziges

<ul>
  <li>Erster Punkt</li>
  <li>Mittlerer Punkt</li>
  <li>Letzter Punkt</li>
</ul>

<ul>
  <li>Ganz allein</li>
</ul>

li {
  padding: 6px 0;
  border-bottom: 1px solid #e4e4e7;
}

li:first-child {
  font-weight: 700;
}

li:last-child {
  border-bottom-style: none;
}

li:only-child {
  color: #2563eb;
}

:first-child trifft ein Element, das das erste Kind seines Elternteils ist. :last-child entsprechend das letzte, :only-child eines, das gar keine Geschwister hat.

Im Beispiel steht ein typischer Einsatz, eine Trennlinie unter jedem Listenpunkt außer dem letzten. Ohne :last-child bräuchtest du dafür eine Extra-Klasse am letzten Eintrag, und die müsste jemand nachziehen, sobald sich die Liste ändert.

02 / 04Jedes zweite, jedes dritte

<table>
  <thead>
    <tr><th>Tag</th><th>Thema</th></tr>
  </thead>
  <tbody>
    <tr><td>Montag</td><td>Selektoren</td></tr>
    <tr><td>Dienstag</td><td>Kaskade</td></tr>
    <tr><td>Mittwoch</td><td>Box-Modell</td></tr>
    <tr><td>Donnerstag</td><td>Farben</td></tr>
    <tr><td>Freitag</td><td>Schrift</td></tr>
    <tr><td>Samstag</td><td>Hintergründe</td></tr>
  </tbody>
</table>

td {
  padding: 6px 16px;
}

/* Jede zweite Zeile */
tbody tr:nth-child(2n) {
  background-color: #fafafa;
}

/* Jede dritte, beginnend mit der ersten */
tbody tr:nth-child(3n+1) {
  font-weight: 700;
}

/* Die vorletzte, von hinten gezählt */
tbody tr:nth-last-child(2) {
  color: #b91c1c;
}

:nth-child() ist der große Bruder. In die Klammer kommt eine Formel der Bauart an+b, und der Browser setzt für n nacheinander 0, 1, 2 und so weiter ein.

2n ergibt 0, 2, 4, 6, also jedes zweite Element. Die 0 trifft dabei nichts. Gezählt wird ab 1, ein nulltes Kind gibt es nicht. Für Zebrastreifen in Tabellen ist das der Standardweg. Es gibt dafür auch die Schlüsselwörter even und odd, die dasselbe bedeuten und sich besser lesen.

3n+1 ergibt 1, 4, 7, also jedes dritte ab dem ersten. Das brauchst du, sobald ein Raster drei Spalten hat und die erste Spalte etwas Eigenes bekommen soll.

:nth-last-child() zählt von hinten, und das ist nützlich, wenn die Zahl der Elemente nicht feststeht und du trotzdem das vorletzte meinst, wie im Beispiel.

Eine Zahl ohne n trifft je Elternteil genau ein Element, :nth-child(3) ist das dritte Kind. Diese Form schreibt man am häufigsten.

03 / 04first-child gegen first-of-type

<article>
  <h2>Eine Überschrift steht davor</h2>
  <p>Dieser Absatz ist NICHT das erste Kind.</p>
  <p>Der zweite Absatz.</p>
</article>

/* Trifft nichts: das erste Kind ist die Überschrift */
p:first-child {
  color: #b91c1c;
}

/* Trifft: der erste Absatz unter seinesgleichen */
p:first-of-type {
  font-size: 20px;
}

Auf der Seite ist kein Absatz rot.

p:first-child heißt nicht „der erste Absatz“, sondern ein Element, das ein p ist und zugleich das erste Kind seines Elternteils. Im Beispiel ist das erste Kind die Überschrift, also trifft der Selektor nichts. Kein Fehler, keine Meldung, einfach keine Wirkung.

p:first-of-type fragt nach dem ersten p unter den p-Geschwistern, egal was sonst noch davorsteht. Deshalb wird der erste Absatz größer.

Es kommt also darauf an, ob alles mitzählt oder nur die eigene Sorte. :first-child zählt alles, :first-of-type nur Elemente desselben Typs. Dasselbe gilt für :last-of-type, :only-of-type und :nth-of-type().

04 / 04Ausschließen mit :not()

<ul>
  <li>Normal</li>
  <li class="hervorgehoben">Hervorgehoben</li>
  <li>Normal</li>
</ul>

li:not(.hervorgehoben) {
  color: #71717a;
}

:not() dreht die Auswahl um. li:not(.hervorgehoben) trifft alle Listenpunkte außer denen mit dieser Klasse.

Oft ist das kürzer als zwei Regeln, bei denen die zweite die erste wieder zurücknimmt. Statt „alle grau, dann die eine wieder schwarz“ schreibst du direkt „alle außer der einen grau“, und dann steht in der Datei auch nur eine Wahrheit.

Seit 2021 darf in die Klammer eine ganze Liste, li:not(.a, .b) schließt beide aus. Für die Spezifität zählt :not() so viel wie sein Argument mit dem meisten Gewicht und nicht null, und das wird in Abschnitt 3 noch wichtig.

An Text und Tabelle der Aufgabe fehlen drei Ausnahmen, und du ergänzt sie ohne eine einzige neue Klasse.