Zustände mit Pseudoklassen

Ein Button soll beim Überfahren dunkler werden, ein gesperrtes Feld grau. Mit einer Klasse lässt sich das nicht sagen, denn der Zustand wechselt, während die Seite offen ist. Dafür gibt es Pseudoklassen, und sie fragen, in welchem Zustand ein Element gerade ist.

Sie beginnen mit einem Doppelpunkt und hängen direkt am Selektor, ohne Leerzeichen: a:hover, nicht a :hover. Mit Leerzeichen wird daraus ein Nachfahren-Selektor, und der bedeutet etwas völlig anderes.

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 Button</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;
}

Hier passiert auf der Seite wirklich etwas.

:hover gilt, solange der Zeiger über dem Element steht. Der Klassiker.

:focus-visible gilt, wenn das Element den Tastaturfokus hat und der Browser meint, dass ein sichtbarer Hinweis angebracht ist. Klickst du in die Seite und gehst dann mit der Tabulatortaste weiter, siehst du den Ring. Ein Mausklick auf den Link gibt ihm dagegen keinen Ring, obwohl er den Fokus hat.

Deshalb gibt es :focus-visible überhaupt. Der ältere :focus zeigt den Ring auch bei Mausklick. Wer ihn deshalb mit outline: none abschaltet, macht die Seite für Tastaturnutzer unbedienbar, weil niemand mehr sieht, wo er gerade ist. Mit :focus-visible ist der Konflikt gelöst: Die Maus bekommt keinen Ring, die Tastatur schon.

Ich ersetze den Fokusring gern durch einen eigenen. Abschalten ohne Ersatz kommt nicht in Frage.

:active gilt für den Moment zwischen Drücken und Loslassen. Eine kleine Rückmeldung dort macht einen Button 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, denn 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.

Haben zwei Regeln dieselbe Spezifität, gewinnt die, die weiter unten steht. Was Spezifität ist und wie man sie ausrechnet, kommt in Lektion 3.2. a:link und a:hover haben jedenfalls dieselbe. Sobald der Link ein href hat, übertönt also a:link das a:hover darüber.

Für die Link-Pseudoklassen gibt es deshalb eine feste Reihenfolge, :link, :visited, :hover, :focus-visible, :active. Ich schreibe sie immer so herum, dann muss ich beim Überfahren nichts suchen.

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>
    <label for="kundennummer">Kundennummer</label>
    <input type="text" id="kundennummer" value="Gesperrt" disabled>
  </p>
  <p>
    <label for="name">Name</label>
    <input type="text" id="name" 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 sind 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 Lektion 2.2. input:checked + label trifft das Label direkt neben einer angehakten Checkbox, und damit reagiert Text auf eine Auswahl, ohne dass du eine Zeile JavaScript schreiben musst. Auf demselben Muster beruht später ein aufklappbares Mobilmenü.

04 / 04Ein Zustand ist keine Bedeutung

Eine Pseudoklasse beschreibt, was gerade ist. Eine Klasse beschreibt, was etwas bedeutet.

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

Beides zusammen ergibt eine Regel wie .button--primaer:hover, und solche Regeln schreibst du in Abschnitt 14 für ganze Buttons.

Im Kontaktformular der Aufgabe machst du diese Zustände sichtbar.