Pseudo-Klassen für Benutzeraktionen ermöglichen es, Elemente basierend auf der Interaktion der Benutzer zu gestalten. Sie werden häufig auf <button>- und <a>-Elemente angewendet, um während der Interaktion Rückmeldungen zu geben.

Die Syntax ist wie folgt:

selector:pseudo-class {
  property: value;
}

• selector kann jeder Selektor sein, den wir in den vorherigen Kapiteln betrachtet haben;
• pseudo-class benötigt ein : vor der Deklaration, und es wird kein Leerzeichen hinzugefügt.

:hover

Wird ausgelöst, wenn ein Benutzer mit dem Mauszeiger auf ein Element zeigt. Ideal zur Erstellung von interaktivem visuellem Feedback.

:focus

Wird aktiviert, wenn ein Element den Tastaturfokus erhält (in der Regel über die Tabulatortaste). Zur Gewährleistung der Barrierefreiheit werden Hover- und Fokus-Stile häufig kombiniert, um Maus- und Tastaturnutzern ein einheitliches Erlebnis zu bieten.

Der Unterschied zwischen :hover und :focus

• :hover reagiert auf Mauszeigeraktivität;
• :focus reagiert auf Tastaturaktivität ("Tab"-Taste).

Im folgenden Beispiel haben wir dasselbe Element mit verschiedenen Pseudoklassen. Bitte achten Sie auf die Datei styles.css. Wir können feststellen, dass sich dieselben Stile für den Hover- und Fokuseffekt hinzufügen lassen, indem der Selektor und die Pseudoklasse mit , getrennt werden.

:active

Wird ausgelöst, während ein Element aktiviert wird, üblicherweise beim Mausklick auf Schaltflächen oder Links.

:visited

Wird auf Links angewendet, nachdem der Benutzer deren Ziel bereits besucht hat. Browser zeigen in der Regel nicht besuchte Links in Blau und besuchte Links in Lila an, sofern diese Stile nicht überschrieben werden.