Pseudo-Klassen

Eine CSS Pseudo-Klasse ist ein Schlüsselwort, das zu einem Selektor hinzugefügt wird, um einen spezifischen Zustand des ausgewählten Elements (oder der Elemente) zu stylen. Zum Beispiel kann die Pseudo-Klasse :hover verwendet werden, um eine Schaltfläche auszuwählen, wenn der Mauszeiger eines Benutzers über die Schaltfläche fährt, und diese ausgewählte Schaltfläche kann dann entsprechend 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 zudem ein Paar Klammern, um 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 nicht nur in Bezug auf den Inhalt des Dokumentbaums, sondern auch in Bezug auf externe Faktoren wie die Historie des Navigators (z. B. :visited), den Status seines Inhalts (wie :checked bei bestimmten Formular-Elementen) oder die Position der Maus (wie :hover, das angibt, ob sich die Maus über einem Element befindet oder nicht) ein Stil zuzuweisen.

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

Pseudo-Klassen für den Anzeigezustand eines Elements

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

:fullscreen: Wählt ein Element aus, das sich aktuell im Vollbild-Modus befindet.
:modal: Wählt ein Element aus, das in einem Zustand ist, in dem es die Interaktion mit Elementen außerhalb davon ausschließt, bis die Interaktion beendet wurde.
:picture-in-picture: Wählt ein Element aus, das sich aktuell im Bild-im-Bild-Modus befindet.

Eingabe-Pseudo-Klassen

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

:autofill: Trifft zu, wenn ein <input> vom Browser automatisch ausgefüllt wurde.
:enabled: Repräsentiert ein Bedienelement, das aktiviert ist.
:disabled: Repräsentiert ein Bedienelement, das deaktiviert ist.
:read-only: Repräsentiert jedes Element, das vom Benutzer nicht geändert werden kann.
:read-write: Repräsentiert jedes Element, das vom Benutzer bearbeitbar ist.
:placeholder-shown: Wählt ein Eingabeelement aus, das Platzhalter-Text anzeigt. Zum Beispiel wird das Attribut placeholder in den <input>- und <textarea>-Elementen berücksichtigt.
:default: Wählt ein oder mehrere Bedienelemente aus, die unter einer Gruppe von Bedienelementen als Standard festgelegt sind.
:checked: Trifft zu, wenn Elemente wie Checkboxen und Radio-Buttons aktiviert sind.
:indeterminate: Wählt Bedienelemente aus, die sich in einem unbestimmten Zustand befinden.
:blank: Wählt ein Benutzereingabe-Element aus, das leer ist, also eine leere Zeichenfolge oder eine andere Null-Eingabe enthält.
:valid: Wählt ein Element mit gültigem Inhalt aus. Zum Beispiel ein Eingabeelement mit dem Typ "email", das eine korrekt formatierte E-Mail-Adresse enthält, oder einen leeren Wert, falls das Eingabefeld nicht erforderlich ist.
:invalid: Wählt ein Element mit ungültigem Inhalt aus. Zum Beispiel ein Eingabeelement mit dem Typ "email", das einen Namen enthält.
:in-range: Trifft auf Elemente mit Bereichsbeschränkungen zu, bei denen der ausgewählte Wert im erlaubten Bereich liegt.
:out-of-range: Trifft auf Elemente mit Bereichsbeschränkungen zu, bei denen der ausgewählte Wert außerhalb des erlaubten Bereichs liegt.
:required: Trifft zu, wenn ein Formularfeld erforderlich ist.
:optional: Trifft zu, wenn ein Formularfeld 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 berücksichtigen die Sprachrichtung eines Dokuments und ermöglichen die Auswahl von Elementen basierend auf Sprache oder Skriptrichtung.

:dir(): Die Richtungs-Pseudo-Klasse wählt ein Element basierend auf dessen Richtungsattribut aus, das durch die Dokumentensprache bestimmt wird.
:lang(): Wählt ein Element basierend auf der Inhaltssprache aus.

Positionsbezogene Pseudo-Klassen

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

:any-link: Wählt ein Element aus, wenn das Element entweder :link oder :visited entsprechen würde.
:link: Wählt Links aus, die noch nicht besucht wurden.
:visited: Wählt Links aus, die besucht worden sind.
:local-link: Wählt Links aus, deren absolute URL mit der Ziel-URL identisch ist. Zum Beispiel Anker-Links zur gleichen Seite.
:target: Wählt das Element aus, das das Ziel der Dokument-URL ist.
:target-within: Wählt Elemente aus, die das Ziel der Dokument-URL sind, sowie Elemente, die einen Nachkommen haben, der das Ziel der Dokument-URL ist.
:scope: Repräsentiert Elemente, die ein Referenzpunkt für Selektoren sind, um sich daran auszurichten.

Ressourcenstatus-Pseudo-Klassen

Diese Pseudo-Klassen gelten für Medien, die in einem abspielbaren Zustand sein können, wie beispielsweise Videos.

:playing: Repräsentiert ein Medienelement, das sich in einem abspielbaren Zustand befindet und abgespielt wird.
:paused: Repräsentiert ein Medienelement, das sich in einem abspielbaren Zustand befindet und pausiert ist.

Zeitdimensionale Pseudo-Klassen

Diese Pseudo-Klassen finden Anwendung bei der Betrachtung von Inhalten, die zeitbasierte Elemente enthalten, wie zum Beispiel WebVTT-Untertitelspuren.

:current: Repräsentiert das Element oder dessen Vorfahre, das gerade angezeigt wird.
:past: Repräsentiert ein Element, das vollständig vor dem :current-Element liegt.
:future: Repräsentiert ein Element, das vollständig nach dem :current-Element liegt.

Baumstruktur-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, mit Ausnahme von Leerzeichen-Zeichen.
: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 gezählt vom Ende der Liste.
:first-child: Wählt ein Element, das das erste seiner Geschwister ist.
:last-child: Wählt ein Element, das das letzte seiner Geschwister ist.
:only-child: Wählt ein Element ohne Geschwister aus. Zum Beispiel ein Listenelement, das innerhalb seiner Liste keine weiteren Listenelemente hat.
:nth-of-type: Verwendet die An+B-Notation, um Elemente aus einer Liste von Geschwisterelementen auszuwählen, die einem bestimmten Typ aus der Liste der Geschwister entsprechen.
:nth-last-of-type: Verwendet die An+B-Notation, um Elemente aus einer Liste von Geschwisterelementen auszuwählen, die einem bestimmten Typ aus der Liste der Geschwister entsprechen, rückwärts gezählt vom Ende der Liste.
:first-of-type: Wählt ein Element, das das erste seiner Geschwister ist und einem bestimmten Typselektor entspricht.
:last-of-type: Wählt ein Element, das das letzte seiner Geschwister ist und einem bestimmten Typselektor entspricht.
:only-of-type: Wählt ein Element, das keine Geschwister desselben Typselektors hat.

Benutzeraktions-Pseudo-Klassen

Diese Pseudo-Klassen erfordern eine Interaktion durch den Benutzer, damit sie angewendet werden, wie das Überfahren eines Elements mit einem Mauszeiger.

:hover: Trifft zu, wenn ein Benutzer ein Element mit einem Zeigegerät bezeichnet, wie das Überfahren eines Elements mit dem Mauszeiger.
:active: Trifft zu, wenn ein Element vom Benutzer aktiviert wird. Beispielsweise, wenn das Element angeklickt wird.
:focus: Trifft zu, wenn ein Element den Fokus hat.
:focus-visible: Trifft zu, wenn ein Element den Fokus hat und das User Agent angibt, dass das Element sichtbar fokussiert sein sollte.
:focus-within: Trifft für ein Element zu, auf das :focus angewendet wird, sowie für Elemente, die einen Nachkommen mit Fokus enthalten.

Funktionale Pseudo-Klassen

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

:is(): Die "matches-any"-Pseudo-Klasse wählt alle Elemente aus, die einem der Selektoren in der bereitgestellten Liste entsprechen. Die Liste ist nachgiebig.
:not(): Die Negations-, oder "matches-none"-Pseudo-Klasse repräsentiert jedes Element, das nicht durch das Argument repräsentiert wird.
:where(): Die Spezifitätsanpassungs-Pseudo-Klasse wählt alle Elemente aus, die einem der Selektoren in der bereitgestellten Liste entsprechen, ohne zusätzliche Spezifität hinzuzufügen. Die Liste ist nachgiebig.
:has(): Die relationale Pseudo-Klasse repräsentiert ein Element, wenn einer der relativen Selektoren übereinstimmt, wenn sie gegen das angehängte Element verankert ist.

Syntax

css

selector:pseudo-class {
  property: value;
}

Ähnlich wie bei regulären Klassen können Sie so viele Pseudo-Klassen wie gewünscht in einem Selektor verketten.

Alphabetisches Register

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 # pseudo-classes
Selectors Level 4
CSS Basic User Interface Module Level 4

Siehe auch

Pseudo-Elemente