Pseudo-Klassen

Eine CSS pseudo-Klasse ist ein Schlüsselwort, das einem Selektor hinzugefügt wird und es ermöglicht, einen bestimmten Zustand des ausgewählten Elements (oder der Elemente) zu stylen. Beispielsweise kann die Pseudo-Klasse :hover verwendet werden, um einen Button auszuwählen, wenn der Zeiger eines Benutzers über den Button schwebt, und dieser ausgewählte Button kann dann gestylt 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 runder Klammern, um die Argumente zu definieren (z.B. :dir()). Das Element, an das eine Pseudo-Klasse angehängt ist, wird als Ankerelement definiert (z.B. button im Fall von button:hover).

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

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

Pseudo-Klassen für den Anzeigezustand von Elementen

Diese Pseudo-Klassen ermöglichen die Auswahl von Elementen basierend auf ihrem Anzeigezustand.

:fullscreen: Stimmt mit einem Element überein, das sich derzeit im Vollbildmodus befindet.
:modal: Stimmt mit einem Element überein, das in einem Zustand ist, in dem es alle Interaktionen mit Elementen außerhalb ausschließt, bis die Interaktion beendet wird.
:picture-in-picture: Stimmt mit einem Element überein, das sich derzeit im Bild-in-Bild-Modus befindet.

Eingabe-Pseudo-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: Stimmt, wenn ein <input> vom Browser automatisch ausgefüllt wurde.
:enabled: Stellt ein Benutzeroberflächenelement dar, das in einem aktivierten Zustand ist.
:disabled: Stellt ein Benutzeroberflächenelement dar, das in einem deaktivierten Zustand ist.
:read-only: Stellt ein Element dar, das vom Benutzer nicht geändert werden kann.
:read-write: Stellt ein bearbeitbares Element dar.
:placeholder-shown: Passt zu einem Eingabeelement, das Placeholder-Text anzeigt. Zum Beispiel wird es das placeholder-Attribut in den <input> und <textarea> Elementen treffen.
:default: Stimmt mit einem oder mehreren UI-Elementen überein, die unter einem Satz von Elementen die Standardwerte sind.
:checked: Stimmt, wenn solche Elemente wie Kontrollkästchen und Optionsfelder eingeschaltet sind.
:indeterminate: Stimmt mit UI-Elementen überein, wenn sie sich in einem unbestimmten Zustand befinden.
:blank: Passt zu einem Benutzereingabe-Element, das leer ist, einen leeren String oder eine andere null Eingabe enthält.
:valid: Stimmt mit einem Element mit gültigem Inhalt überein. Zum Beispiel ein Eingabeelement mit dem Typ 'email', das eine gültig geformte E-Mail-Adresse enthält oder einen leeren Wert, wenn das Steuerelement nicht erforderlich ist.
:invalid: Stimmt mit einem Element mit ungültigem Inhalt überein. Zum Beispiel ein Eingabeelement mit Typ 'email' mit einem eingegebenen Namen.
:in-range: Gilt für Elemente mit Reichweitenbeschränkungen. Beispielsweise ein Schieberegler-Steuerelement, wenn der ausgewählte Wert innerhalb des erlaubten Bereichs liegt.
:out-of-range: Gilt für Elemente mit Reichweitenbeschränkungen. Beispielsweise ein Schieberegler-Steuerelement, wenn der ausgewählte Wert außerhalb des erlaubten Bereichs liegt.
:required: Passt, wenn ein Formularelement erforderlich ist.
:optional: Passt, wenn ein Formularelement optional ist.
:user-valid: Stellt ein Element mit korrekter Eingabe dar, jedoch nur, wenn der Benutzer mit ihm interagiert hat.
:user-invalid: Stellt ein Element mit falscher Eingabe dar, jedoch nur, wenn der Benutzer mit ihm interagiert hat.

Sprachliche Pseudo-Klassen

Diese Pseudo-Klassen spiegeln die Dokumentensprache wider und ermöglichen die Auswahl von Elementen basierend auf Sprache oder Skriptrichtung.

:dir(): Die Richtungs-Pseudo-Klasse wählt ein Element basierend auf seiner Richtung, wie sie durch die Dokumentensprache bestimmt wird.
:lang(): Wählt ein Element basierend auf seiner Inhaltsprache aus.

Standort-Pseudo-Klassen

Diese Pseudo-Klassen beziehen sich auf Links und auf anvisierte Elemente innerhalb des aktuellen Dokuments.

:any-link: Passt zu einem Element, wenn das Element entweder :link oder :visited passt.
:link: Passt zu Links, die noch nicht besucht wurden.
:visited: Passt zu Links, die besucht wurden.
:local-link: Passt zu Links, deren absolute URL dieselbe ist wie die Ziel-URL. Zum Beispiel Anker-Links zur selben Seite.
:target: Passt zu dem Element, das das Ziel der Dokument-URL ist.
:target-within: Passt zu Elementen, die das Ziel der Dokument-URL sind, aber auch zu Elementen, die einen Nachkommen haben, der das Ziel der Dokument-URL ist.
:scope: Stellt Elemente dar, die einen Referenzpunkt für Selektoren darstellen, gegen den sie verglichen werden.

Ressourcenstatus-Pseudo-Klassen

Diese Pseudo-Klassen gelten für Medien, die in der Lage sind, in einem Zustand zu sein, in dem sie als spielend beschrieben werden würden, wie z.B. ein Video.

:playing: Stellt ein Medienelement dar, das in der Lage ist, abzuspielen, wenn dieses Element gespielt wird.
:paused: Stellt ein Medienelement dar, das in der Lage ist, abzuspielen, wenn dieses Element pausiert ist.

Zeitdimensionale Pseudo-Klassen

Diese Pseudo-Klassen gelten beim Betrachten von etwas, das zeitgesteuert ist, wie z.B. eine WebVTT Beschriftungsspur.

:current: Stellt das Element oder einen Vorgänger des Elements dar, das angezeigt wird.
:past: Stellt ein Element dar, das vollständig vor dem :current Element liegt.
:future: Stellt ein Element dar, das vollständig nach dem :current Element liegt.

Baumstrukturelle Pseudo-Klassen

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

:root: Stellt ein Element dar, das die Wurzel des Dokuments ist. In HTML ist dies üblicherweise das <html>-Element.
:empty: Stellt ein Element dar, das keine Kinder außer Leerzeichen-Zeichen hat.
:nth-child: Verwendet die An+B-Notation, um Elemente aus einer Liste von Geschwistern auszuwählen.
:nth-last-child: Verwendet die An+B-Notation, um Elemente aus einer Liste von Geschwistern auszuwählen, rückwärts von der Liste gezählt.
:first-child: Passt zu einem Element, das das erste seiner Geschwister ist.
:last-child: Passt zu einem Element, das das letzte seiner Geschwister ist.
:only-child: Passt zu einem Element, das keine Geschwister hat. Zum Beispiel ein Listenelement ohne andere Listenelemente in dieser Liste.
:nth-of-type: Verwendet die An+B-Notation, um Elemente aus einer Liste von Geschwistern auszuwählen, die einem bestimmten Typ aus einer Liste von Geschwistern entsprechen.
:nth-last-of-type: Verwendet die An+B-Notation, um Elemente aus einer Liste von Geschwistern, die einem bestimmten Typ aus einer Liste von Geschwistern entsprechen, rückwärts vom Ende der Liste auszuwählen.
:first-of-type: Passt zu einem Element, das das erste seiner Geschwister ist und auch einem bestimmten Typ-Selektor entspricht.
:last-of-type: Passt zu einem Element, das das letzte seiner Geschwister ist und auch einem bestimmten Typ-Selektor entspricht.
:only-of-type: Passt zu einem Element, das keine Geschwister des ausgewählten Typ-Selectors hat.

Benutzeraktionen-Pseudo-Klassen

Diese Pseudo-Klassen erfordern eine Interaktion des Benutzers, damit sie angewendet werden, wie z.B. das Halten eines Mauszeigers über einem Element.

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

Funktionale Pseudo-Klassen

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

:is(): Die Matches-Any-Pseudo-Klasse passt zu jedem Element, das mit einem der in der Liste angegebenen Selektoren übereinstimmt. Die Liste ist verzeihlich.
:not(): Die Negation oder Matches-None-Pseudo-Klasse stellt jedes Element dar, das nicht durch sein Argument repräsentiert wird.
:where(): Die Pseudo-Klasse für Spezifitätsanpassung passt zu jedem Element, das mit einem der in der Liste angegebenen Selektoren übereinstimmt, ohne Spezifitätsgewicht hinzuzufügen. Die Liste ist verzeihlich.
:has(): Die relationale Pseudo-Klasse stellt ein Element dar, wenn einer der relativen Selektoren übereinstimmt, wenn er gegen das angehängte Element verankert ist.

Syntax

css

selector:pseudo-class {
  property: value;
}

Wie reguläre Klassen können Sie in einem Selektor so viele Pseudo-Klassen wie gewünscht aneinanderreihen.

Alphabetischer Index

Pseudo-Klassen, die durch ein Set von CSS-Spezifikationen definiert sind, umfassen Folgendes:

: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