Zustände mit Pseudoklassen

Bis hierher hast du Elemente danach ausgewählt, was sie sind und wo sie stehen. Pseudoklassen fragen etwas anderes: in welchem Zustand ist dieses Element gerade?

Sie beginnen mit einem Doppelpunkt und hängen direkt am Selektor, ohne Leerzeichen: a:hover, nicht a :hover. Das Leerzeichen würde daraus einen Nachfahren-Selektor machen und etwas völlig anderes bedeuten.

01 / 04Zeiger, Fokus und Klick

<p>Fahr mit der Maus über den Link und drück danach die Tabulatortaste.</p>
<p><a href="#">Zu den Projekten</a></p>
<p><button type="button">Ein Knopf</button></p>

a {
  color: #2563eb;
}

a:hover {
  color: #b91c1c;
}

/* Nur bei Tastaturbedienung, nicht beim Mausklick */
a:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

button:active {
  background-color: #d4d4d8;
}

Probier es auf der Seite aus, hier passiert wirklich etwas.

:hover gilt, solange der Zeiger über dem Element steht. Der Klassiker, und der einzige der drei, den fast jeder kennt.

:focus-visible gilt, wenn das Element den Tastaturfokus hat und der Browser meint, dass ein sichtbarer Hinweis angebracht ist. Klick einmal auf die Seite und geh dann mit der Tab-Taste weiter, dann siehst du den Ring. Klick den Link dagegen mit der Maus an: kein Ring, obwohl er den Fokus hat.

Genau darum gibt es :focus-visible überhaupt. Der ältere :focus zeigt den Ring auch bei Mausklick, was viele Entwickler dazu gebracht hat, ihn mit outline: none abzuschalten. Und damit war die Seite für Tastaturnutzer unbedienbar, weil niemand mehr sehen konnte, wo man gerade ist. :focus-visible löst den Konflikt: Maus bekommt keinen Ring, Tastatur schon.

Die Regel, die daraus folgt: Du darfst den Standard-Fokusring gern ersetzen. Abschalten ohne Ersatz darfst du ihn nicht.

:active gilt für den Moment zwischen Drücken und Loslassen. Eine kleine Rückmeldung dort macht einen Knopf spürbar besser, und sie kostet zwei Zeilen.

Dazu kommen :link für noch nicht besuchte Links und :visited für besuchte. Bei :visited sind aus Datenschutzgründen nur wenige Eigenschaften erlaubt, vor allem Farben: sonst könnte eine Seite ausmessen, wo du vorher warst.

02 / 04Die Reihenfolge bei Links

<p>Der Link reagiert nicht auf die Maus, weil eine Regel darunter gewinnt.</p>
<p><a href="/projekte">Fahr mich an</a></p>

a:hover {
  color: #b91c1c;
}

a:link {
  color: #2563eb;
}

Auf der Seite passiert beim Überfahren nichts. Beide Regeln sind richtig geschrieben, sie stehen nur in der falschen Reihenfolge.

Der Grund kommt in Abschnitt 3 ausführlich, hier die Kurzfassung: Bei gleich starken Regeln gewinnt die, die weiter unten steht. a:link und a:hover sind gleich stark, also übertönt a:link das a:hover darüber, sobald der Link ein href hat.

Deshalb gibt es für die Link-Pseudoklassen eine feste Reihenfolge: :link, :visited, :hover, :focus-visible, :active. Im Englischen merkt man sich das als LoVe HAte. Klingt albern, sitzt aber nach einmal Ärgern.

03 / 04Formularzustände

<form>
  <p>
    <input type="checkbox" id="agb" checked>
    <label for="agb">Angehakt</label>
  </p>
  <p>
    <input type="checkbox" id="news">
    <label for="news">Nicht angehakt</label>
  </p>
  <p><input type="text" value="Gesperrt" disabled></p>
  <p><input type="text" placeholder="Pflichtfeld" required></p>
</form>

input:disabled {
  background-color: #f4f4f5;
  color: #a1a1aa;
}

input:required {
  border-left: 3px solid #b91c1c;
}

/* Das Label neben einer angehakten Checkbox */
input:checked + label {
  color: #15803d;
  font-weight: 700;
}

Die zweite große Gruppe beschreibt keinen Zeiger, sondern Zustände, die im Markup stehen oder aus einer Eingabe entstehen.

:disabled und :enabled für gesperrte Felder. :checked für angehakte Checkboxen und ausgewählte Radiobuttons. :required und :optional für Pflichtfelder. :placeholder-shown, solange das Feld leer ist und den Platzhalter zeigt.

Interessant wird es in Kombination mit den Kombinatoren aus der letzten Lektion. input:checked + label trifft das Label direkt neben einer angehakten Checkbox. Damit reagiert Text auf eine Auswahl, ohne eine Zeile JavaScript. Dasselbe Muster trägt später ein aufklappbares Mobilmenü.

04 / 04Ein Zustand ist keine Bedeutung

Zum Schluss eine Abgrenzung, die im Alltag hilft. Eine Pseudoklasse beschreibt, was gerade ist. Eine Klasse beschreibt, was etwas bedeutet.

Ein Knopf ist nicht “wichtig”, weil man gerade darüberfährt. Er ist wichtig, weil er die Hauptaktion der Seite ist, und das steht als class="knopf--primaer" im Markup. Ob der Zeiger darauf steht, entscheidet der Browser im Moment.

Beides zusammen ergibt dann die Regel, die du in Lektion 14.1 schreiben wirst: .knopf--primaer:hover.