Pseudoklassen

Eine CSS Pseudoklasse ist ein Schlüsselwort, das einem Selektor hinzugefügt wird, um einen bestimmten Zustand der ausgewählten Elemente zu stylen. Zum Beispiel kann die Pseudoklasse :hover verwendet werden, um einen Button auszuwählen, wenn der Zeiger eines Nutzers über den Button schwebt, und dieser ausgewählte Button kann dann gestaltet werden.

css

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

Eine Pseudoklasse besteht aus einem Doppelpunkt (:), gefolgt vom Namen der Pseudoklasse (z.B. :hover). Eine funktionale Pseudoklasse enthält außerdem ein Paar Klammern zur Definition der Argumente (z.B. :dir()). Das Element, an das eine Pseudoklasse angehängt ist, wird als Ankerelement definiert (z.B. button im Fall von button:hover).

Pseudoklassen ermöglichen es Ihnen, einem Element nicht nur in Bezug auf den Inhalt des Dokumentbaums einen Stil zu verleihen, sondern auch in Bezug auf externe Faktoren wie den Verlauf des Browsers (z.B. :visited), den Status seines Inhalts (wie :checked bei bestimmten Formularelementen) oder die Position der Maus (wie :hover, das angibt, ob die Maus über einem Element ist oder nicht).

Hinweis: Im Gegensatz zu Pseudoklassen können Pseudoelemente verwendet werden, um einen spezifischen Teil eines Elements zu gestalten.

Elementare Pseudoklassen

Diese Pseudoklassen beziehen sich auf die Kernidentität von Elementen.

:defined: Passt auf jedes Element, das definiert ist.

Pseudoklassen zum Anzeigestatus von Elementen

Diese Pseudoklassen ermöglichen die Auswahl von Elementen basierend auf ihren Anzeigestatus.

:open: Passt auf ein Element, das entweder offen oder geschlossen werden kann und derzeit offen ist.
:popover-open: Passt auf ein Popover-Element, das sich derzeit im Anzeigestatus befindet.
:modal: Passt auf ein Element, das sich in einem Zustand befindet, in dem es jede Interaktion mit Elementen außerhalb davon ausschließt, bis die Interaktion beendet ist.
: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-Pseudoklassen

Diese Pseudoklassen 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: Stellt ein User-Interface-Element dar, das sich im aktivierten Zustand befindet.
:disabled: Stellt ein User-Interface-Element dar, das sich im deaktivierten Zustand befindet.
:read-only: Stellt jedes Element dar, das vom Benutzer nicht verändert werden kann.
:read-write: Stellt jedes Element dar, das vom Benutzer bearbeitet werden kann.
:placeholder-shown: Passt auf ein Eingabeelement, das Platzhaltertext anzeigt. Zum Beispiel wird es auf das placeholder-Attribut in den <input>- und <textarea>-Elementen passen.
:autofill: Passt, wenn ein <input> vom Browser automatisch ausgefüllt wurde.
:default: Passt auf ein oder mehrere UI-Elemente, die der Standard unter einer Gruppe von Elementen sind.
:checked: Passt, wenn Elemente wie Kontrollkästchen und Optionsfelder eingeschaltet sind.
:indeterminate: Passt auf UI-Elemente, wenn sie sich in einem unbestimmten Zustand befinden.
:blank: Passt auf ein Benutzereingabeelement, das leer ist, eine leere Zeichenfolge oder eine andere Null-Eingabe enthält.
:valid: Passt auf ein Element mit gültigem Inhalt. Zum Beispiel ein Eingabeelement mit dem Typ 'email', das eine gültig geformte E-Mail-Adresse enthält oder ein leerer Wert, wenn die Eingabe nicht erforderlich ist.
:invalid: Passt auf ein Element mit ungültigem Inhalt. Zum Beispiel ein Eingabeelement mit dem Typ 'email', bei dem ein Name eingegeben wurde.
:in-range: Gilt für Elemente mit Bereichsbeschränkungen. Zum Beispiel ein Schieberegler, wenn der ausgewählte Wert im erlaubten Bereich liegt.
:out-of-range: Gilt für Elemente mit Bereichsbeschränkungen. Zum Beispiel ein Schieberegler, 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 damit interagiert hat.
:user-invalid: Stellt ein Element mit falscher Eingabe dar, jedoch nur, wenn der Benutzer damit interagiert hat.

Sprachliche Pseudoklassen

Diese Pseudoklassen spiegeln die Sprache des Dokuments wider und ermöglichen die Auswahl von Elementen basierend auf der Sprache oder der Schreibrichtung.

:dir(): Die Richtungs-Pseudoklasse wählt ein Element basierend auf seiner Richtungsangabe aus, die durch die Dokumentensprache bestimmt wird.
:lang(): Wählen Sie ein Element basierend auf seiner Inhaltssprache aus.

Standort-Pseudoklassen

Diese Pseudoklassen beziehen sich auf Links und auf gezielte Elemente innerhalb des aktuellen Dokuments.

:any-link: Passt auf ein Element, wenn das Element entweder auf :link oder :visited passen würde.
: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 Ankerlinks zur gleichen Seite.
:target: Passt auf das Element, das das Ziel der URL des Dokuments ist.
:target-within: Passt auf Elemente, die das Ziel der URL des Dokuments sind, aber auch auf Elemente, die einen Nachkommen haben, der das Ziel der URL des Dokuments ist.
:scope: Stellt Elemente dar, die einen Bezugspunkt für Selektoren darstellen, gegen die abgeglichen werden soll.

Ressourcenstatus-Pseudoklassen

Diese Pseudoklassen gelten für Medien, die in einem Zustand sein können, in dem sie als spielend beschrieben werden würden, wie zum Beispiel ein Video.

:playing: Stellt ein abspielbares Element dar, das abgespielt wird.
:paused: Stellt ein abspielbares Element dar, das pausiert ist.
:seeking: Stellt ein abspielbares Element dar, das gerade nach einer Wiedergabeposition in der Medienressource sucht.
:buffering: Stellt ein abspielbares Element dar, das abgespielt wird, aber vorübergehend gestoppt ist, weil es die Medienressource herunterlädt.
:stalled: Stellt ein abspielbares Element dar, das abgespielt wird, aber gestoppt ist, weil es die Medienressource nicht herunterladen kann.
:muted: Stellt ein klangerzeugendes Element dar, das stummgeschaltet ist.
:volume-locked: Stellt ein klangerzeugendes Element dar, dessen Lautstärkepegel durch den Browser gesperrt ist.

Zeitdimensionale Pseudoklassen

Diese Pseudoklassen gelten, wenn etwas betrachtet wird, das ein Timing hat, wie z.B. eine WebVTT Untertitelspur.

:current: Stellt das Element oder das Element eines Vorfahren dar, das angezeigt wird.
:past: Stellt ein Element dar, das vollständig vor dem :current-Element auftritt.
:future: Stellt ein Element dar, das vollständig nach dem :current-Element auftritt.

Baumstrukturale Pseudoklassen

Diese Pseudoklassen beziehen sich auf die Position eines Elements innerhalb des Dokumentbaums.

:root: Stellt ein Element dar, das die Wurzel des Dokuments ist. In HTML ist dies normalerweise das <html>-Element.
:empty: Stellt ein Element dar, das keine Kinder hat, außer Leerzeichenzeichen.
: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 vom gewählten Typselektor hat.

Schattenstrukturale Pseudoklassen

Diese Pseudoklassen beziehen sich auf das Shadow DOM.

:host: Passt auf den Wirt des Schattenbaums.
:host(): Passt auf ein Element, das zu :host passt und auf einen der Selektoren in der bereitgestellten Liste passt.
:host-context(): Wählt Elemente außerhalb des Schattenbaums im Kontext des Schattenwirts aus.
:has-slotted: Passt auf Slot-Elemente, denen Inhalte zugewiesen wurden.

Benutzeraktions-Pseudoklassen

Diese Pseudoklassen erfordern eine Interaktion des Benutzers, damit sie angewendet werden, wie zum Beispiel das Halten eines Mauspointers über einem Element.

:hover: Passt, wenn ein Benutzer ein Element mit einem Zeigegerät auswählt, beispielsweise durch 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 feststellt, dass das Element sichtbar fokussiert sein sollte.
:focus-within: Passt auf ein Element, auf das :focus zutrifft, zusätzlich zu jedem Element, das einen Nachkommen hat, auf den :focus zutrifft.
:target-current: Passt auf das ::scroll-marker-Pseudoelement einer scroll-marker-group, das derzeit gescrollt wird, mit anderen Worten, den aktiven Scroll-Marker.

Funktionale Pseudoklassen

Diese Pseudoklassen akzeptieren eine Selektorliste oder eine verzeihende Selektorliste als Parameter.

:is(): Die „passt-auf-jedes“-Pseudoklasse passt auf jedes Element, das auf einen der bereitgestellten Selektoren passt. Die Liste ist verzeihend.
:not(): Die Negation-, oder „passt-auf-keinen“-, Pseudoklasse stellt jedes Element dar, das nicht durch ihren Parameter dargestellt wird.
:where(): Die Spezifitätsanpassungs-Pseudoklasse passt auf jedes Element, das auf einen der bereitgestellten Selektoren passt, ohne Gewicht in der Spezifität hinzuzufügen. Die Liste ist verzeihend.
:has(): Die relationale Pseudoklasse stellt ein Element dar, wenn einer der relativen Selektoren übereinstimmt, wenn gegen das angehängte Element verankert.

Benutzerdefinierte Zustands-Pseudoklassen

Diese Pseudoklassen gelten für benutzerdefinierte Elemente.

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

Seiten-Pseudoklassen

Diese Pseudoklassen beziehen sich auf Seiten in einem gedruckten Dokument und werden mit der @page-At-Regel verwendet.

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

Syntax

css

selector:pseudo-class {
  property: value;
}

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

Alphabetisches Verzeichnis

Pseudoklassen, die durch eine Gruppe 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

Pseudoelemente