Pseudo-Klassen

Eine CSS Pseudo-Klasse ist ein Schlüsselwort, das zu einem Selektor hinzugefügt wird und es ermöglicht, einen spezifischen Zustand des ausgewählten Elements oder der ausgewählten Elemente zu stylen. Zum Beispiel kann die Pseudo-Klasse :hover verwendet werden, um einen Button auszuwählen, wenn der Zeiger eines Benutzers über dem 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 Klammern zur Definition der Argumente (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, einen Stil auf ein Element in Bezug auf den Inhalt des Dokumentenbaums sowie auf externe Faktoren wie die Historie des Browsers (z.B. :visited), den Status seines Inhalts (wie :checked bei bestimmten Formularelementen) oder die Position der Maus (wie :hover, die anzeigt, ob die Maus über einem Element ist oder nicht) anzuwenden.

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 Kernidentität von Elementen.

:defined: Passt zu jedem Element, das definiert ist.

Anzeigezustand von Elementen Pseudo-Klassen

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

:open: Passt zu einem Element, das entweder geöffnet oder geschlossen sein kann und derzeit geöffnet ist.
:popover-open: Passt zu einem Popover-Element, das sich derzeit im Anzeigestatus befindet.
:modal: Passt zu einem Element, das sich in einem Zustand befindet, in dem es alle Interaktionen mit Elementen außerhalb davon ausschließt, bis die Interaktion aufgehoben wurde.
:fullscreen: Passt zu einem Element, das derzeit im Vollbildmodus ist.
:picture-in-picture: Passt zu einem Element, das derzeit im Bild-im-Bild-Modus ist.

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 befindet vor und nach der Interaktion.

:enabled: Repräsentiert ein Benutzerschnittstellenelement, das aktiviert ist.
:disabled: Repräsentiert ein Benutzerschnittstellenelement, 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 zu einem Eingabeelement, das Platzhaltertext anzeigt. Zum Beispiel passt es zum placeholder-Attribut in den <input> und <textarea> Elementen.
:autofill: Passt, wenn ein <input> vom Browser ausgefüllt wurde.
:default: Passt zu einem oder mehreren Benutzerschnittstellenelementen, die standardmäßig unter einer Gruppe von Elementen sind.
:checked: Passt, wenn Elemente wie Kontrollkästchen und Optionsschaltflächen aktiviert sind.
:indeterminate: Passt zu Benutzerschnittstellenelementen, wenn sie in einem unbestimmten Zustand sind.
:blank: Passt zu einem Benutzereingabeelement, das leer ist, eine leere Zeichenfolge oder andere Null-Eingaben enthält.
:valid: Passt zu einem Element mit gültigem Inhalt. Zum Beispiel ein Eingabeelement mit dem Typ 'email', das eine gültig formatierte E-Mail-Adresse oder einen leeren Wert enthält, wenn das Steuerelement nicht erforderlich ist.
:invalid: Passt zu einem Element mit ungültigem Inhalt. Zum Beispiel ein Eingabeelement mit Typ 'email' mit einem eingegebenen Namen.
:in-range: Gilt für Elemente mit Bereichsbeschränkungen. Zum Beispiel ein Schieberegler, wenn der ausgewählte Wert im zulässigen Bereich liegt.
:out-of-range: Gilt für Elemente mit Bereichsbeschränkungen. Zum Beispiel ein Schieberegler, wenn der ausgewählte Wert außerhalb des zulässigen 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, aber nur, wenn der Benutzer damit interagiert hat.
:user-invalid: Repräsentiert ein Element mit falscher Eingabe, aber nur, wenn der Benutzer damit interagiert hat.

Sprachliche Pseudo-Klassen

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

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

Positions-Pseudo-Klassen

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

:any-link: Passt zu einem Element, wenn das Element entweder :link oder :visited entsprechen würde.
:link: Passt zu Links, die noch nicht besucht wurden.
:visited: Passt zu Links, die besucht wurden.
:local-link: Passt zu Links, deren absolute URL mit der Ziel-URL übereinstimmt. Zum Beispiel Ankerlinks zur gleichen 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: Repräsentiert Elemente, die einen Referenzpunkt für Selektoren darstellen, gegen die verglichen werden soll.

Ressourcenstatus-Pseudo-Klassen

Diese Pseudo-Klassen gelten für Medien, die sich in einem Zustand befinden, in dem sie als abspielbar beschrieben werden können, wie 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 derzeit eine Wiedergabeposition in der Medienressource sucht.
:buffering: Repräsentiert ein abspielbares Element, das abspielt, aber vorübergehend pausiert ist, weil es die Medienressource herunterlädt.
:stalled: Repräsentiert ein abspielbares Element, das abspielt, aber pausiert ist, weil es die Medienressource nicht herunterladen kann.
:muted: Repräsentiert ein klangerzeugendes Element, das stummgeschaltet ist.
:volume-locked: Repräsentiert ein klangerzeugendes Element, dessen Lautstärkepegel vom Browser gesperrt ist.

Zeitdimensionale Pseudo-Klassen

Diese Pseudo-Klassen gelten beim Ansehen von etwas, das eine Zeitsteuerung hat, wie eine WebVTT Beschriftungsspur.

: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.

Baum-strukturelle Pseudo-Klassen

Diese Pseudo-Klassen beziehen sich auf die Position eines Elements im Dokumentenbaum.

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

Schatten-strukturelle Pseudo-Klassen

Diese Pseudo-Klassen beziehen sich auf das Shadow-DOM.

:host: Passt zu dem Schattenbaum-Schatten-Host.
:host(): Passt zu einem Element, das :host entspricht und zu einem der in der Liste bereitgestellten Selektoren passt.
:host-context(): Wählt Elemente außerhalb des Schattenbaums im Kontext des Schatten-Hosts aus.
:has-slotted: Passt zu Slot-Elementen, denen Inhalt zugewiesen wurde.

Benutzeraktions-Pseudo-Klassen

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

:hover: Passt, wenn ein Benutzer ein Element mit einem Zeigegerät anzeigt, 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 den Fokus hat und der Benutzeragent erkennt, dass das Element sichtbar fokussiert werden sollte.
:focus-within: Passt zu einem Element, auf das :focus anwendbar ist, sowie zu jedem Element, das einen Nachkommen hat, auf den :focus anwendbar ist.
:target-current: Passt zum ::scroll-marker Pseudoelement einer scroll-marker-group, die derzeit gescrollt wurde, mit anderen Worten, die aktive Scrollemarkierung.

Funktionale Pseudo-Klassen

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

:is(): Die Alles-zulassen-Pseudo-Klasse passt zu jedem Element, das einem der in der Liste bereitgestellten Selektoren entspricht. Die Liste ist verzeihend.
:not(): Die Verneinung, oder Alles-ausschließen-Pseudo-Klasse repräsentiert jedes Element, das nicht durch sein Argument repräsentiert wird.
:where(): Die Spezifizitätsanpassungs-Pseudo-Klasse passt zu jedem Element, das einem der in der Liste bereitgestellten Selektoren entspricht, ohne eine Spezifizitätsgewichtung hinzuzufügen. Die Liste ist verzeihend.
:has(): Die relationale Pseudo-Klasse repräsentiert ein Element, wenn eines der relativen Selektoren übereinstimmt, wenn es gegen das angehängte Element verankert ist.

Benutzerdefinierte Zustand-Pseudo-Klassen

Diese Pseudo-Klassen gelten für benutzerdefinierte Elemente.

:state(): Passt zu benutzerdefinierten Elementen, die den angegebenen benutzerdefinierten Zustand haben.

Seiten-Pseudo-Klassen

Diese Pseudo-Klassen beziehen sich auf Seiten in einem gedruckten Dokument und werden zusammen mit der @page At-Regel 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.

Ansichtsübergang-Pseudo-Klassen

Diese Pseudo-Klassen beziehen sich auf Elemente, die an einem Ansichtsübergang beteiligt sind.

:active-view-transition: Passt zum Wurzelelement eines Dokuments, wenn ein Ansichtsübergang im Gange ist (aktiv) und hört auf zu passen, sobald der Übergang abgeschlossen ist.
:active-view-transition-type(): Passt zum Wurzelelement eines Dokuments, wenn ein bestimmter Ansichtsübergang im Gange ist (aktiv) und hört auf zu passen, sobald der Übergang abgeschlossen ist.

Syntax

css

selector:pseudo-class {
  property: value;
}

Wie reguläre Klassen können Pseudo-Klassen in einem Selektor miteinander verkettet werden.

Alphabetisches Verzeichnis

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

:blank (Eingabe) Experimentell
:blank (Seite)
:buffering

:checked
:current 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