Pseudo-Klassen

Eine CSS Pseudo-Klasse ist ein Schlüsselwort, das einem Selektor hinzugefügt wird und Ihnen ermöglicht, einen spezifischen Zustand des/der ausgewählten Elemente(s) zu stylen. Zum Beispiel 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 Pseudo-Klassennamen (z. B. :hover). Eine funktionale Pseudo-Klasse enthält zudem ein Paar Klammern zur Definition der Argumente (z. B. :dir()). Das Element, an das eine Pseudo-Klasse angefügt ist, wird als Ankerelement definiert (z. B. button im Fall von button:hover).

Pseudo-Klassen ermöglichen es Ihnen, einen Stil auf ein Element anzuwenden, nicht nur in Bezug auf den Inhalt des Dokumentenbaums, sondern auch in Bezug auf externe Faktoren wie die Navigation-Historie (zum Beispiel :visited), den Status seines Inhalts (wie :checked bei bestimmten Formularelementen) oder die Position der Maus (wie :hover, mit der Sie wissen können, ob die Maus sich über einem Element befindet oder nicht).

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

Elementare Pseudo-Klassen

Diese Pseudo-Klassen beziehen sich auf die Kerndefinition von Elementen.

:defined: Passt auf jedes definierte Element.

Angezeigter Zustand der Pseudo-Klassen

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

:open: Passt auf ein Element, das entweder geöffnet oder geschlossen sein kann und derzeit geöffnet ist.
:popover-open: Passt auf ein Popover-Element, das sich derzeit im Anzeigemodus befindet.
:modal: Passt auf ein Element, das sich in einem Zustand befindet, in dem es alle Interaktionen mit Elementen außerhalb ausschließt, bis die Interaktion beendet wurde.
:fullscreen: Passt auf ein Element, das sich derzeit im Vollbildmodus befindet.
:picture-in-picture: Passt auf ein Element, das sich derzeit im Bild-im-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.

:enabled: Repräsentiert ein Benutzeroberflächenelement, das aktiviert ist.
:disabled: Repräsentiert ein Benutzeroberflächenelement, das deaktiviert ist.
:read-only: Repräsentiert ein Element, das vom Benutzer nicht geändert werden kann.
:read-write: Repräsentiert ein Element, das vom Benutzer bearbeitet werden kann.
:placeholder-shown: Passt auf ein Eingabeelement, das Platzhaltertext anzeigt. Zum Beispiel wird das placeholder-Attribut in den <input>- und <textarea>-Elementen übereinstimmen.
:autofill: Passt, wenn ein <input> vom Browser automatisch ausgefüllt wurde.
:default: Passt auf ein oder mehrere UI-Elemente, die das Standard-Element unter einer Gruppe von Elementen sind.
:checked: Passt, wenn Elemente wie Kontrollkästchen und Optionsfelder aktiviert sind.
:indeterminate: Passt auf UI-Elemente, wenn sie sich in einem unbestimmten Zustand befinden.
:blank: Passt auf ein Benutzereingabe-Element, das leer ist, entweder eine leere Zeichenkette oder eine andere null Eingabe enthält.
:valid: Passt auf ein Element mit gültigem Inhalt. Zum Beispiel ein Eingabeelement vom Typ 'email', das eine gültig formatierte E-Mail-Adresse oder einen leeren Wert enthält, wenn die Kontrolle nicht erforderlich ist.
:invalid: Passt auf ein Element mit ungültigem Inhalt. Zum Beispiel ein Eingabeelement vom Typ 'email' mit einem eingegebenen Namen.
:in-range: Gilt für Elemente mit Bereichsbegrenzungen. Zum Beispiel ein Schieberegler-Steuerelement, wenn der ausgewählte Wert innerhalb des erlaubten Bereichs liegt.
:out-of-range: Gilt für Elemente mit Bereichsbegrenzungen. Zum Beispiel 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: 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 spiegeln die Sprache des Dokuments wider und ermöglichen die Auswahl von Elementen basierend auf Sprache oder Schreibrichtung.

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

Standortbezogene Pseudo-Klassen

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

:any-link: Passt auf ein Element, wenn das Element entweder :link oder :visited übereinstimmt.
:link: Passt auf Links, die noch nicht besucht wurden.
:visited: Passt auf Links, die besucht wurden.
:local-link: Passt auf Links, deren absolute URL mit der Ziel-URL identisch ist. Zum Beispiel Anker-Links zur selben Seite.
:target: Passt auf das Element, das das Ziel-Element der Dokument-URL ist.
:target-within: Passt auf Elemente, die das Ziel-Element der Dokument-URL sind, sowie auf Elemente, die einen Nachkommen haben, der das Ziel-Element der Dokument-URL ist.
:scope: Repräsentiert Elemente, die einen Referenzpunkt für Selektoren darstellen, gegen den abgeglichen werden soll.

Ressourcenstatus-Pseudo-Klassen

Diese Pseudo-Klassen gelten für Medien, die in einem Zustand sein können, in dem sie als abspielend beschrieben werden würden, wie z. B. ein Video.

:playing: Repräsentiert ein abspielbares Element, das abgespielt wird.
:paused: Repräsentiert ein abspielbares Element, das pausiert ist.
:seeking: Repräsentiert ein abspielbares Element, das aktuell eine Wiedergabeposition in der Medienressource sucht.
:buffering: Repräsentiert ein abspielbares Element, das abspielt, aber vorübergehend gestoppt ist, weil es die Medienressource herunterlädt.
:stalled: Repräsentiert ein abspielbares Element, das abspielt, aber gestoppt ist, weil es die Medienressource nicht herunterladen kann.
:muted: Repräsentiert ein tonproduzierendes Element, das stummgeschaltet ist.
:volume-locked: Repräsentiert ein tonproduzierendes Element, dessen Lautstärkepegel vom Browser gesperrt wurde.

Zeitdimensionale Pseudo-Klassen

Diese Pseudo-Klassen gelten beim Betrachten von etwas, das zeitlich begrenzt ist, wie beispielsweise eine WebVTT Untertitelspur.

:current: Repräsentiert das Element oder den 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 im Dokumentenbaum.

:root: Repräsentiert ein Element, das die Wurzel des Dokuments ist. In HTML ist dies normalerweise das <html>-Element.
:empty: Repräsentiert ein Element ohne andere Kinder als Leerzeichenelemente.
:nth-child(): Verwendet die An+B-Notation, um Elemente aus einer Liste von Geschwisterelementen auszuwählen.
:nth-last-child(): Verwendet die An+B-Notation, um Elemente aus einer Liste von Geschwisterelementen auszuwählen, rückwärts vom Ende der Liste gezählt.
:first-child: Passt auf ein Element, das das erste seiner Geschwister ist.
:last-child: Passt auf ein Element, das das letzte seiner Geschwister ist.
:only-child: Passt auf ein 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 Geschwisterelementen auszuwählen, die einem bestimmten Typ aus einer Liste von Geschwisterelementen entsprechen.
:nth-last-of-type(): Verwendet die An+B-Notation, um Elemente aus einer Liste von Geschwisterelementen auszuwählen, die einem bestimmten Typ aus einer Liste von Geschwisterelementen entsprechen, rückwärts vom Ende der Liste gezählt.
:first-of-type: Passt auf ein Element, das das erste seiner Geschwister ist und auch einem bestimmten Typselektor entspricht.
:last-of-type: Passt auf ein Element, das das letzte seiner Geschwister ist und auch einem bestimmten Typselektor entspricht.
:only-of-type: Passt auf ein Element, das keine Geschwister des gewählten Typselektors hat.

Schattenstrukturelle Pseudo-Klassen

Diese Pseudo-Klassen beziehen sich auf den Shadow DOM.

:host: Passt auf den Schattenhost des Schattensbaums.
:host(): Passt auf ein Element, das :host entspricht und mit einem der in der bereitgestellten Liste enthaltenen Selektoren übereinstimmt.
:host-context(): Wählt Elemente außerhalb des Schattendoms im Kontext des Schattenhosts aus.
:has-slotted: Passt auf Slot-Elemente, denen Inhalte zugewiesen wurden.

Benutzeraktions-Pseudo-Klassen

Diese Pseudo-Klassen erfordern eine Interaktion durch den Benutzer, damit sie anwendbar sind, wie beispielsweise das Halten eines Mauszeigers über ein Element.

:hover: Passt, wenn ein Benutzer ein Element mit einem Zeigegerät bezeichnet, wie beispielsweise das Halten des Mauszeigers über dem Element.
:active: Passt, wenn ein Element durch den Benutzer aktiviert wird. Zum Beispiel, wenn das Element angeklickt wird.
:focus: Passt, wenn ein Element den Fokus hat.
:focus-visible: Passt, wenn ein Element den Fokus hat und der Benutzeragent identifiziert, dass das Element sichtbar fokussiert sein sollte.
:focus-within: Passt auf ein Element, auf das :focus zutrifft, sowie auf jedes Element, das einen Nachkommen hat, auf den :focus zutrifft.

Funktionale Pseudo-Klassen

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

:is(): Die Matches-Any-Pseudo-Klasse passt auf jedes Element, das einem der in der bereitgestellten Liste enthaltenen Selektoren entspricht. Die Liste ist fehlertolerant.
:not(): Die Negation oder Matches-None-Pseudo-Klasse repräsentiert jedes Element, das nicht durch sein Argument dargestellt wird.
:where(): Die Spezifitätsanpassungs-Pseudo-Klasse passt auf jedes Element, das einem der in der bereitgestellten Liste enthaltenen Selektoren entspricht, ohne eine Spezifitätsgewichtung hinzuzufügen. Die Liste ist fehlertolerant.
:has(): Die relationale Pseudo-Klasse repräsentiert ein Element, wenn einer der relativen Selektoren übereinstimmen, wenn die Ankerung gegen das angefügte Element erfolgt.

Benutzerdefinierte Status-Pseudo-Klassen

Diese Pseudo-Klassen gelten für benutzerdefinierte Elemente.

:state(): Passt auf benutzerdefinierte Elemente, die den angegebenen benutzerdefinierten Zustand haben.

Seiten-Pseudo-Klassen

Diese Pseudo-Klassen beziehen sich auf Seiten in einem gedruckten Dokument und werden mit dem @page-At-Rule verwendet.

:left: Repräsentiert alle linken Seiten eines gedruckten Dokuments.
:right: Repräsentiert alle rechten Seiten eines gedruckten Dokuments.
:first: Repräsentiert die erste Seite eines gedruckten Dokuments.
:blank: Repräsentiert eine leere Seite in einem gedruckten Dokument.

Syntax

css

selector:pseudo-class {
  property: value;
}

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

Alphabetisches Verzeichnis

Pseudo-Klassen, die durch eine Reihe von CSS-Spezifikationen definiert sind, schließen Folgendes ein:

:blank (input) Experimentell
:blank (page)
:buffering

:checked
:current Experimentell

:target
:target-within Experimentell

:where()

Spezifikationen

Specification
HTML # pseudo-classes
Selectors Level 4
CSS Scoping Module Level 1
CSS Paged Media Module Level 3

Siehe auch

Pseudo-Elemente