css mit Adi Prinz

Unterschied zwischen Pseudoklassen und Pseudoelementen

Eine Pseudoklasse wählt ein vorhandenes Element aufgrund eines bestimmten Zustands oder seiner Position in der Dokumentstruktur aus. Sie wird mit einem Doppelpunkt geschrieben.

a:hover {
  color: red;
}
    

In diesem Beispiel wird ein Link formatiert, während sich der Mauszeiger darüber befindet.

Ein Pseudoelement wählt einen bestimmten Teil eines Elements aus oder erzeugt einen zusätzlichen Bereich. Es wird normalerweise mit zwei Doppelpunkten geschrieben.

p::first-letter {
  font-size: 2em;
}
    

In diesem Beispiel wird der erste Buchstabe jedes Absatzes formatiert.

Syntax

Pseudoklassen werden mit einem Doppelpunkt zwischen dem Selektor und dem Namen der Pseudoklasse geschrieben.

selector:pseudoklasse {
  eigenschaft: wert;
}
    

Pseudoelemente werden nach der aktuellen Schreibweise mit zwei Doppelpunkten angegeben.

selector::pseudoelement {
  eigenschaft: wert;
}
    

Bei älteren Pseudoelementen wie :before, :after, :first-line und :first-letter unterstützen Browser aus historischen Gründen auch die Schreibweise mit nur einem Doppelpunkt. In neuem CSS sollte jedoch die Schreibweise mit zwei Doppelpunkten verwendet werden.

Pseudoklassen für Links

Links können abhängig davon formatiert werden, ob sie bereits besucht wurden oder sich gerade in einem bestimmten Bedienzustand befinden.

Nicht besuchte und besuchte Links

Mit :link werden noch nicht besuchte Links ausgewählt. :visited formatiert Links, deren Ziel bereits aufgerufen wurde.

a:link {
  color: #0056b3;
}

a:visited {
  color: #6f42c1;
}
    

Aus Datenschutzgründen dürfen Browser bei :visited nur bestimmte Darstellungen verändern. Gut geeignet sind beispielsweise Textfarbe, Rahmenfarbe und Hintergrundfarbe. Eigenschaften, die Inhalte oder das Layout beeinflussen, sind eingeschränkt.

Alle Links mit :any-link auswählen

Die Pseudoklasse :any-link wählt sowohl besuchte als auch nicht besuchte Links aus. Sie entspricht damit grundsätzlich der gemeinsamen Auswahl mit :link und :visited.

a:any-link {
  font-weight: 600;
  text-decoration-thickness: 2px;
}
    

Eine vergleichbare Schreibweise wäre:

a:link,
a:visited {
  font-weight: 600;
  text-decoration-thickness: 2px;
}
    

Reihenfolge der Link-Pseudoklassen

Werden mehrere Linkzustände formatiert, sollte im Stylesheet die folgende Reihenfolge verwendet werden:

1. :link
2. :visited
3. :hover
4. :active

a:link {
  color: #0056b3;
}

a:visited {
  color: #6f42c1;
}

a:hover {
  color: #c0392b;
}

a:active {
  color: #198754;
}
    

Als Merkhilfe wird häufig die Abkürzung LVHA verwendet: Link – Visited – Hover – Active.

Die Reihenfolge ist wichtig, weil die Selektoren dieselbe Spezifität besitzen. Eine später notierte Regel kann daher eine frühere Regel überschreiben.

:hover und :active

:hover und :active sind nicht auf Links beschränkt. Sie können auch auf Buttons, Bilder, Karten und andere Elemente angewendet werden.

:hover

Die Pseudoklasse :hover wird aktiv, während sich der Mauszeiger über einem Element befindet.

.pseudo-button-hover:hover {
  background-color: #6f42c1;
  color: white;
  transform: translateY(-2px);
}
    

Auf Geräten mit Touchscreen gibt es nicht immer einen dauerhaften Hoverzustand. Wichtige Informationen und Funktionen dürfen deshalb nicht ausschließlich über :hover zugänglich sein.

:active

Die Pseudoklasse :active wirkt während der Aktivierung eines Elements. Bei einem Button ist das normalerweise der kurze Zeitraum, während die Maustaste gedrückt wird.

.pseudo-button-active:active {
  background-color: #198754;
  color: white;
  transform: translateY(2px);
}
    

:active beschreibt nur den momentanen Bedienzustand. Es bedeutet nicht, dass ein Navigationselement dauerhaft die aktuelle Seite kennzeichnet. Dafür wird normalerweise eine Klasse wie .active verwendet.

:focus, :focus-visible und :focus-within

Fokus-Pseudoklassen sind besonders wichtig für die Bedienung mit der Tastatur. Ein sichtbarer Fokus zeigt, welches Element momentan mit der Tastatur bedient werden kann.

:focus

:focus wird auf ein Element angewendet, sobald es den Fokus erhält. Das kann beispielsweise durch Anklicken oder mit der Tab-Taste geschehen.

input:focus {
  border-color: #6f42c1;
  box-shadow: 0 0 0 3px rgb(111 66 193 / 25%);
}
    

:focus-visible

:focus-visible wird verwendet, wenn ein deutlich sichtbarer Fokusindikator erforderlich ist. Das ist besonders bei der Bedienung mit der Tastatur wichtig.

.pseudo-button-focus:focus-visible {
  outline: 3px solid #fd7e14;
  outline-offset: 3px;
}
    

Ein Fokusrahmen sollte nicht ersatzlos entfernt werden. Die Anweisung outline: none ist nur dann sinnvoll, wenn stattdessen ein anderer gut sichtbarer Fokusindikator gestaltet wird.

:focus-within

:focus-within wählt einen übergeordneten Bereich aus, sobald dieser selbst oder ein darin enthaltenes Element den Fokus besitzt.

.pseudo-form-group:focus-within {
  border-color: #6f42c1;
  background-color: #f5f0ff;
}
    

Dadurch kann beispielsweise die gesamte Gruppe aus Beschriftung und Eingabefeld hervorgehoben werden, obwohl nur das Eingabefeld selbst den Fokus besitzt.

Zustände von Formularelementen

Formularelemente können aktiviert, deaktiviert, ausgewählt oder nur zum Lesen bestimmt sein. CSS stellt dafür verschiedene Pseudoklassen bereit.

:enabled und :disabled

Die Pseudoklasse :enabled wählt verwendbare Formularelemente aus. Mit :disabled werden Elemente ausgewählt, die durch das HTML-Attribut disabled deaktiviert wurden.

input:enabled {
  border-color: #198754;
}

input:disabled {
  border-color: #aaa;
  background-color: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
}
    

enabled ist kein HTML-Attribut. Ein Formularelement ist grundsätzlich aktiviert, solange es nicht mit disabled deaktiviert wurde.

:checked

:checked wählt ausgewählte Kontrollkästchen, Optionsfelder und bestimmte ausgewählte Listeneinträge aus.

.pseudo-choice input:checked {
  accent-color: #6f42c1;
}

.pseudo-choice:has(input:checked) {
  color: #6f42c1;
  font-weight: 700;
}
    

Die Eigenschaft accent-color legt die Akzentfarbe beispielsweise für Kontrollkästchen und Optionsfelder fest.

Im zweiten Selektor wählt :has() die Beschriftung aus, wenn das darin enthaltene Eingabefeld ausgewählt ist. :has() behandeln wir später noch ausführlich.

:indeterminate

Die Pseudoklasse :indeterminate beschreibt einen unbestimmten Auswahlzustand. Bei einem Kontrollkästchen muss dieser Zustand normalerweise mit JavaScript gesetzt werden.

input:indeterminate {
  outline: 3px solid #fd7e14;
  outline-offset: 2px;
}
    

const checkbox = document.querySelector("#indeterminate-example");
checkbox.indeterminate = true;
    

Der unbestimmte Zustand bedeutet beispielsweise, dass nur ein Teil einer untergeordneten Auswahl aktiviert ist. Er ist nicht dasselbe wie checked.

:read-only und :read-write

Mit :read-only können nicht bearbeitbare Elemente ausgewählt werden. :read-write gilt für Elemente, deren Inhalt vom Benutzer bearbeitet werden kann.

input:read-only {
  background-color: #e9ecef;
  color: #495057;
}

input:read-write {
  background-color: white;
  border-color: #6f42c1;
}
    

Ein Feld mit readonly kann nicht bearbeitet werden, wird aber beim Absenden des Formulars grundsätzlich mitgesendet. Ein Feld mit disabled wird dagegen normalerweise nicht mitgesendet.

Pflichtfelder und optionale Felder

Die Pseudoklassen :required und :optional unterscheiden zwischen Pflichtfeldern und freiwillig ausfüllbaren Eingabefeldern.

input:required {
  border-left: 6px solid #dc3545;
}

input:optional {
  border-left: 6px solid #6c757d;
}
    

Eine farbliche Kennzeichnung allein reicht nicht aus, um ein Pflichtfeld verständlich zu kennzeichnen. Zusätzlich sollte ein sichtbarer Hinweis wie „Pflichtfeld“ oder ein erklärtes Sternchen verwendet werden.

Gültigkeit von Eingaben

Browser können viele Eingaben anhand der HTML-Attribute automatisch überprüfen. CSS kann auf das Ergebnis dieser Prüfung reagieren.

:valid und :invalid

Ob eine Eingabe gültig ist, hängt unter anderem vom Eingabetyp und von Attributen wie required, pattern, minlength oder maxlength ab.

input:valid {
  border-color: #198754;
}

input:invalid {
  border-color: #dc3545;
}
    

Ein leeres Pflichtfeld ist bereits beim Laden der Seite ungültig. Deshalb kann eine sofort sichtbare rote Fehlermarkierung störend wirken. Häufig ist es sinnvoll, den Zustand zusätzlich mit :focus, :placeholder-shown oder einer durch JavaScript gesetzten Klasse zu verbinden.

input:required:invalid:not(:placeholder-shown) {
  border-color: #dc3545;
}

input:required:valid {
  border-color: #198754;
}
    

:in-range und :out-of-range

Diese Pseudoklassen gelten für Eingabefelder, deren Werte mit min und max begrenzt werden können.

input:in-range {
  border-color: #198754;
}

input:out-of-range {
  border-color: #dc3545;
  background-color: #fff0f1;
}
    

:placeholder-shown

:placeholder-shown gilt, solange in einem Eingabefeld der Platzhalter angezeigt wird.

input:placeholder-shown {
  border-color: #fd7e14;
  background-color: #fff8e6;
}
    

Ein Platzhalter ersetzt keine dauerhafte Beschriftung. Für die Barrierefreiheit sollte ein Eingabefeld weiterhin ein label-Element besitzen.