Pseudo-Klassen

Eine CSS Pseudo-Klasse ist ein Schlüsselwort, das einem Selektor hinzugefügt wird und einen speziellen Zustand der ausgewählten Elemente festlegt. Zum Beispiel kann die Pseudo-Klasse :hover verwendet werden, um einen Button auszuwählen, wenn der Mauszeiger eines Benutzers über den Button bewegt wird; dieser ausgewählte Button kann dann gestaltet werden.

css

/* Any button over which the user's pointer is hovering */
button:hover {
  color: blue;
}

Eine Pseudo-Klasse besteht aus einem Doppelpunkt (:) gefolgt vom Namen der Pseudo-Klasse (z.B. :hover). Eine funktionale Pseudo-Klasse enthält auch ein Paar Klammern, um die Argumente zu definieren (z.B. :dir()). Das Element, an das eine Pseudo-Klasse angehängt ist, wird als Anker-Element definiert (z.B. button im Fall von button:hover).

Pseudo-Klassen ermöglichen es Ihnen, einem Element einen Stil nicht nur in Bezug auf den Inhalt des Dokumentbaums, sondern auch in Bezug auf externe Faktoren wie der Verlauf des Navigators (zum Beispiel :visited), den Status seines Inhalts (zum Beispiel :checked bei bestimmten Formularelementen) oder die Position der Maus (wie :hover, womit Sie wissen, ob die Maus über einem Element ist oder nicht) zuzuweisen.

Hinweis: Im Gegensatz zu Pseudo-Klassen können Pseudo-Elemente verwendet werden, um einen spezifischen Teil eines Elements zu gestalten.

Pseudo-Klassen für den Anzeigestatus eines Elements

Diese Pseudo-Klassen ermöglichen die Auswahl von Elementen basierend auf ihren Anzeigestatus.

:fullscreen: Trifft auf ein Element zu, das sich derzeit im Vollbildmodus befindet.
:modal: Trifft auf ein Element zu, das sich in einem Zustand befindet, in dem es alle Interaktionen mit außerhalb liegenden Elementen ausschließt, bis die Interaktion beendet wurde.
:picture-in-picture: Trifft auf ein Element zu, das sich derzeit im Bild-in-Bild-Modus befindet.

Eingabepseudo-Klassen

Diese Pseudo-Klassen beziehen sich auf Formularelemente und ermöglichen die Auswahl von Elementen basierend auf HTML-Attributen und dem Zustand, in dem sich das Feld vor und nach der Interaktion befindet.

:autofill: Trifft zu, wenn ein <input> vom Browser automatisch ausgefüllt wurde.
:enabled: Repräsentiert ein Benutzeroberflächenelement, das aktiviert ist.
:disabled: Repräsentiert ein Benutzeroberflächenelement, das deaktiviert ist.
:read-only: Repräsentiert jedes Element, das vom Benutzer nicht verändert werden kann.
:read-write: Repräsentiert jedes Element, das vom Benutzer bearbeitet werden kann.
:placeholder-shown: Trifft auf ein Eingabeelement zu, das Platzhaltertext anzeigt. Beispielsweise wird das placeholder-Attribut in den <input> und <textarea>-Elementen getroffen.
:default: Trifft auf eines oder mehrere UI-Elemente zu, die in einer Gruppe von Elementen als Standard fungieren.
:checked: Trifft zu, wenn Elemente wie Kontrollkästchen und Optionsfelder aktiviert sind.
:indeterminate: Trifft auf UI-Elemente zu, die sich in einem unbestimmten Zustand befinden.
:blank: Trifft auf ein Benutzereingabeelement zu, das leer ist und eine leere Zeichenkette oder andere null Eingaben enthält.
:valid: Trifft auf ein Element mit gültigem Inhalt zu. Beispielsweise ein Eingabeelement mit dem Typ 'email', das eine korrekt formatierte E-Mail-Adresse enthält oder einen leeren Wert, wenn die Kontrolle nicht erforderlich ist.
:invalid: Trifft auf ein Element mit ungültigem Inhalt zu. Beispielsweise ein Eingabeelement mit dem Typ 'email' mit einem eingetragenen Namen.
:in-range: Trifft auf Elemente mit Bereichsbeschränkungen zu. Beispielsweise bei einem Schieberegler, wenn der ausgewählte Wert innerhalb des erlaubten Bereichs liegt.
:out-of-range: Trifft auf Elemente mit Bereichsbeschränkungen zu. Beispielsweise bei einem Schieberegler, wenn der ausgewählte Wert außerhalb des erlaubten Bereichs liegt.
:required: Trifft zu, wenn ein Formularelement erforderlich ist.
:optional: Trifft zu, wenn ein Formularelement optional ist.
:user-valid: Repräsentiert ein Element mit korrekter Eingabe, jedoch nur, wenn der Benutzer damit interagiert hat.
:user-invalid: Repräsentiert ein Element mit falscher Eingabe, jedoch nur, wenn der Benutzer damit interagiert hat.

Sprachliche Pseudo-Klassen

Diese Pseudo-Klassen reflektieren die Dokumentensprache und ermöglichen die Auswahl von Elementen basierend auf der Sprache oder Schreibrichtung.

:dir(): Die Richtlinien-Pseudo-Klasse wählt ein Element basierend auf dessen Richtlinien aus, wie sie durch die Dokumentensprache bestimmt wird.
:lang(): Wählen Sie ein Element basierend auf seiner Inhaltssprache aus.

Standort-Pseudo-Klassen

Diese Pseudo-Klassen beziehen sich auf Links und zielgerichtete Elemente im aktuellen Dokument.

:any-link: Trifft auf ein Element zu, wenn das Element entweder :link oder :visited entsprechen würde.
:link: Trifft auf Links zu, die noch nicht besucht wurden.
:visited: Trifft auf Links zu, die besucht wurden.
:local-link: Trifft auf Links zu, deren absolute URL der Ziel-URL entspricht. Zum Beispiel Ankerlinks auf derselben Seite.
:target: Trifft auf das Element zu, welches das Ziel der Dokument-URL ist.
:target-within: Trifft auf Elemente zu, die das Ziel der Dokument-URL sind, aber auch auf Elemente, die einen Nachfahren haben, der das Ziel der Dokument-URL ist.
:scope: Repräsentiert Elemente, die einen Referenzpunkt für Selektoren darstellen, gegen den gematcht wird.

Ressourcenstatus-Pseudo-Klassen

Diese Pseudo-Klassen gelten für Medien, die in einem Zustand sein können, den man als spielend beschreiben würde, wie ein Video.

:playing: Repräsentiert ein Medienelement, das in der Lage ist zu spielen, wenn dieses Element abgespielt wird.
:paused: Repräsentiert ein Medienelement, das in der Lage ist zu spielen, wenn dieses Element pausiert ist.

Zeitdimensionale Pseudo-Klassen

Diese Pseudo-Klassen gelten, wenn man etwas betrachtet, das zeitlich abläuft, wie z.B. eine WebVTT-Untertitelspur.

:current: Repräsentiert das Element oder einen Vorfahren des Elements, das angezeigt wird.
:past: Repräsentiert ein Element, das vollständig vor dem :current-Element auftritt.
:future: Repräsentiert ein Element, das vollständig nach dem :current-Element auftritt.

Baumstrukturelle Pseudo-Klassen

Diese Pseudo-Klassen beziehen sich auf die Position eines Elements innerhalb des Dokumentbaums.

:root: Repräsentiert ein Element, das die Wurzel des Dokuments ist. Im HTML ist dies normalerweise das <html>-Element.
:empty: Repräsentiert ein Element ohne Kinder außer Leerzeichenzeichen.
:nth-child: Verwendet die Notation An+B um Elemente aus einer Liste von Geschwisterelementen auszuwählen.
:nth-last-child: Verwendet die Notation An+B um Elemente aus einer Liste von Geschwisterelementen auszuwählen, rückwärts von Ende der Liste gezählt.
:first-child: Trifft auf ein Element zu, das das erste seiner Geschwister ist.
:last-child: Trifft auf ein Element zu, das das letzte seiner Geschwister ist.
:only-child: Trifft auf ein Element zu, das keine Geschwister hat. Zum Beispiel ein Listenelement ohne andere Listenelemente in dieser Liste.
:nth-of-type: Verwendet die Notation An+B um Elemente aus einer Liste von Geschwisterelementen auszuwählen, die einen bestimmten Typ aus einer Liste von Geschwisterelementen entspricht.
:nth-last-of-type: Verwendet die Notation An+B um Elemente aus einer Liste von Geschwisterelementen auszuwählen, die einem bestimmten Typ aus einer Liste von Geschwisterelementen rückwärts von Ende der Liste entspricht.
:first-of-type: Trifft auf ein Element zu, das das erste seiner Geschwister ist und entspricht zusätzlich einem bestimmten Typselektor.
:last-of-type: Trifft auf ein Element zu, das das letzte seiner Geschwister ist und entspricht zusätzlich einem bestimmten Typselektor.
:only-of-type: Trifft auf ein Element zu, das keine Geschwister des gewählten Typselektors hat.

Benutzeraktions-Pseudo-Klassen

Diese Pseudo-Klassen erfordern eine gewisse Interaktion des Benutzers, um zuzutreffen, wie zum Beispiel das Halten eines Mauszeigers über einem Element.

:hover: Trifft zu, wenn ein Benutzer ein Element mit einem Zeigegerät auswählt, wie zum Beispiel das Halten des Mauszeigers über dem Element.
:active: Trifft zu, wenn ein Element vom Benutzer aktiviert wird. Zum Beispiel, wenn auf das Element geklickt wird.
:focus: Trifft zu, wenn ein Element den Fokus hat.
:focus-visible: Trifft zu, wenn ein Element den Fokus hat und der Benutzeragent feststellt, dass das Element sichtbar fokussiert sein sollte.
:focus-within: Trifft auf ein Element zu, auf das :focus zutrifft, plus auf jedes Element, das einen Nachfahren hat, auf den :focus zutrifft.

Funktionale Pseudo-Klassen

Diese Pseudo-Klassen akzeptieren eine Selektorliste oder eine verzeihende Selektorliste als Parameter.

:is(): Die Übereinstimmung mit jeder Pseudo-Klasse trifft auf jedes Element zu, das jedem der Selektoren in der bereitgestellten Liste entspricht. Die Liste ist verzeihend.
:not(): Die Verneinung oder keine Übereinstimmung mit dieser Pseudo-Klasse repräsentiert jedes Element, das nicht durch sein Argument repräsentiert wird.
:where(): Die Spezifitätsanpassungs-Pseudo-Klasse trifft auf jedes Element zu, das jedem der Selektoren in der bereitgestellten Liste ohne Hinzufügen von Spezifitätsgewicht entspricht. Die Liste ist verzeihend.
:has(): Die relationale Pseudo-Klasse repräsentiert ein Element, wenn einer der relativen Selektoren übereinstimmt, wenn gegen das angehängte Element verankert.

Syntax

css

selector:pseudo-class {
  property: value;
}

Wie bei regulären Klassen können Sie in einem Selektor so viele Pseudo-Klassen aneinanderreihen, wie Sie möchten.

Alphabetisches Verzeichnis

Pseudo-Klassen, die durch eine Reihe von CSS-Spezifikationen definiert sind, umfassen die folgenden:

:blank Experimentell

:has() Experimentell
:host
:host()
:host-context() Experimentell
:hover

:modal

:target
:target-within Experimentell

:user-invalid

:where()

Spezifikationen

Specification
HTML Standard # pseudo-classes
Selectors Level 4
CSS Basic User Interface Module Level 4

Siehe auch

Pseudo-Elemente