Pseudoklassen

Eine CSS Pseudoklasse ist ein Schlüsselwort, das zu einem Selektor hinzugefügt wird, damit Sie Elemente basierend auf Informationen auswählen können, die außerhalb des Dokumentenbaums liegen, wie zum Beispiel einen bestimmten Zustand der ausgewählten Elemente. Beispielsweise kann die Pseudoklasse :hover verwendet werden, um eine Schaltfläche zu gestalten, wenn der Mauszeiger eines Benutzers darüber schwebt.

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 auch ein Paar Klammern zur Definition der Argumente (z. B. :dir()). Das Element, an das eine Pseudoklasse angehängt ist, wird als Anker-Element definiert (z. B. button im Fall von button:hover).

Pseudoklassen ermöglichen es Ihnen, einem Element nicht nur in Bezug auf den Inhalt des Dokumentenbaums, sondern auch in Bezug auf externe Faktoren wie die Verlaufshistorie des Navigators (z. B. :visited), den Status seines Inhalts (wie :checked bei bestimmten Formularelementen) oder die Position der Maus (wie :hover, wodurch Sie wissen, ob sich die Maus über einem Element befindet oder nicht) einen Stil zuzuweisen.

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

:defined: Stimmt mit jedem Element überein, das definiert ist.
:heading: Stimmt mit jedem Überschriftenelement (<h1>-<h6>) überein.

Pseudoklassen für den Anzeigestatus von Elementen

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

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

Eingabepseudoklassen

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: Repräsentiert ein Benutzerschnittstellenelement, das aktiv ist.
:disabled: Repräsentiert ein Benutzerschnittstellenelement, das deaktiviert ist.
:read-only: Repräsentiert jedes Element, das vom Benutzer nicht verändert werden kann.
:read-write: Repräsentiert jedes Element, das vom Benutzer bearbeitet werden kann.
:placeholder-shown: Stimmt mit einem Eingabeelement überein, das Platzhaltertext anzeigt. Beispielsweise wird es mit dem placeholder-Attribut in den <input>- und <textarea>-Elementen übereinstimmen.
:autofill: Stimmt überein, wenn ein <input>-Element vom Browser automatisch ausgefüllt wurde.
:default: Stimmt mit einem oder mehreren UI-Elementen überein, die die Standardeinstellung innerhalb einer Gruppe von Elementen sind.
:checked: Stimmt, wenn Elemente wie Kontrollkästchen und Optionsfelder aktiviert sind.
:indeterminate: Stimmt mit UI-Elementen überein, wenn sie sich in einem unbestimmten Zustand befinden.
:blank: Stimmt mit einem Benutzereingabeelement, das leer ist, d.h. eine leere Zeichenfolge oder eine andere nicht zugeordnete Eingabe enthält, überein.
:valid: Stimmt mit einem Element mit gültigem Inhalt überein. Beispielsweise ein Eingabeelement vom Typ 'email', das eine gültig formatierte E-Mail-Adresse oder einen leeren Wert enthält, wenn die Eingabe nicht erforderlich ist.
:invalid: Stimmt mit einem Element mit ungültigen Inhalten überein. Beispielsweise ein Eingabeelement mit Typ 'email' mit einem angegebenen Namen.
:in-range: Gilt für Elemente mit Bereichsbeschränkungen. Beispielsweise ein Schieberegler, wenn der ausgewählte Wert innerhalb des erlaubten Bereichs liegt.
:out-of-range: Gilt für Elemente mit Bereichsbeschränkungen. Beispielsweise ein Schieberegler, wenn der ausgewählte Wert außerhalb des erlaubten Bereichs liegt.
:required: Stimmt, wenn ein Formularelement erforderlich ist.
:optional: Stimmt, 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.

Sprachbezogene Pseudoklassen

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

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

Standort-Pseudoklassen

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

:any-link: Stimmt mit einem Element überein, wenn das Element entweder mit :link oder :visited übereinstimmen würde.
:link: Stimmt mit Links überein, die noch nicht besucht wurden.
:visited: Stimmt mit Links überein, die besucht wurden.
:local-link: Stimmt mit Links, deren absolute URL die gleiche ist wie die Ziel-URL. Beispielsweise Anker-Links zur gleichen Seite.
:target: Stimmt mit dem Element überein, das das Ziel der Dokumenten-URL ist.
:scope: Repräsentiert Elemente, die ein Referenzpunkt für Selektoren sind, um gegen diese überprüft zu werden.

Hinweis: Eine :target-within-Pseudoklasse, um Elemente abzugleichen, die oder deren Nachkommen das Ziel der Dokumenten-URL sind, wurde definiert, aber aus der Spezifikation entfernt. Verwenden Sie :has(:target) zu diesem Zweck.

Ressourcenstatus-Pseudoklassen

Diese Pseudoklassen gelten für Medien, die sich in einem Zustand befinden können, in dem sie als spielend beschrieben werden können, wie z. B. ein Video.

:playing: Repräsentiert ein abspielbares Element, das gerade abgespielt wird.
:paused: Repräsentiert ein abspielbares Element, das pausiert ist.
:seeking: Repräsentiert ein abspielbares Element, das gerade nach einer Wiedergabeposition in der Medienressource sucht.
:buffering: Repräsentiert ein abspielbares Element, das abgespielt wird, aber vorübergehend angehalten ist, weil es die Medienressource herunterlädt.
:stalled: Repräsentiert ein abspielbares Element, das abgespielt wird, 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, das seine Lautstärke durch den Browser gesperrt hat.

Zeitdimensionale Pseudoklassen

Diese Pseudoklassen gelten, wenn etwas angezeigt wird, das eine zeitliche Komponente hat, wie z. B. eine WebVTT-Untertitelspur.

:current: Repräsentiert das Element oder den Vorfahren des Elements, der gerade angezeigt wird.
:past: Repräsentiert ein Element, das sich vollständig vor dem :current-Element befindet.
:future: Repräsentiert ein Element, das sich vollständig nach dem :current-Element befindet.

Baumstruktur-Pseudoklassen

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

: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 Kinder außer Leerzeichensymbolen.
:nth-child(): Verwendet An+B-Notation zur Auswahl von Elementen aus einer Liste von Geschwisterelementen.
:nth-last-child(): Verwendet An+B-Notation zur Auswahl von Elementen aus einer Liste von Geschwisterelementen, rückwärts vom Ende der Liste gezählt.
:first-child: Stimmt mit einem Element überein, das das erste seiner Geschwister ist.
:last-child: Stimmt mit einem Element überein, das das letzte seiner Geschwister ist.
:only-child: Stimmt mit einem Element überein, das keine Geschwister hat. Beispielsweise ein Listenelement, das keine weiteren Listenelemente in dieser Liste hat.
:heading(): Verwendet An+B-Notation zur Auswahl von Überschriftenelementen (<h1>-<h6>).
:nth-of-type(): Verwendet An+B-Notation zur Auswahl von Elementen aus einer Liste von Geschwisterelementen, die einem bestimmten Typ aus einer Liste von Geschwisterelementen entsprechen.
:nth-last-of-type(): Verwendet An+B-Notation zur Auswahl von Elementen aus einer Liste von Geschwisterelementen, die einem bestimmten Typ aus einer Liste von Geschwisterelementen entsprechen, rückwärts vom Ende der Liste gezählt.
:first-of-type: Stimmt mit einem Element überein, das das erste seiner Geschwister ist und auch einem bestimmten Typselektor entspricht.
:last-of-type: Stimmt mit einem Element überein, das das letzte seiner Geschwister ist und auch einem bestimmten Typselektor entspricht.
:only-of-type: Stimmt mit einem Element überein, das keine Geschwister des gewählten Typselektors hat.

Schattenstruktur-Pseudoklassen

Diese Pseudoklassen beziehen sich auf den Schatten-DOM.

:host: Stimmt mit dem Schatten-Wirt des Schattenbaums überein.
:host(): Stimmt mit einem Element über ein Kriterium in der bereitgestellten Liste überein, wenn es auch mit :host übereinstimmt.
:host-context(): Wählt Elemente außerhalb des Schattenbaums im Kontext des Schatten-Wirts aus.
:has-slotted: Stimmt mit Slot-Elementen überein, denen Inhalte zugewiesen wurden.

Benutzeraktions-Pseudoklassen

Diese Pseudoklassen erfordern einige Interaktionen durch den Benutzer, damit sie angewendet werden, wie z. B. das Halten eines Mauszeigers über einem Element.

:hover: Stimmt, wenn ein Benutzer ein Element mit einer Zeigegerät kennzeichnet, wie z. B. das Halten des Mauszeigers über dem Element.
:active: Stimmt, wenn ein Element vom Benutzer aktiviert wird. Zum Beispiel, wenn auf das Element geklickt wird.
:focus: Stimmt, wenn ein Element fokussiert ist.
:focus-visible: Stimmt, wenn ein Element fokussiert ist und der Benutzeragent erkennt, dass das Element sichtbar fokussiert sein sollte.
:focus-within: Stimmt mit einem Element überein, auf das :focus angewendet wird, plus jedes Element, das einen Nachfahren hat, auf das :focus angewendet wird.
:target-current: Stimmt mit dem ::scroll-marker-Pseudoelement einer scroll-marker-group, die derzeit gescrollt wird, in anderen Worten, dem aktiven Scroll-Marker.

Funktionale Pseudoklassen

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

:is(): Die Matches-Any-Pseudoklasse stimmt mit jedem Element überein, das mit einem der in der Liste angegebenen Selektoren übereinstimmt. Die Liste ist vergebend.
:not(): Die Negations- oder Matches-None-Pseudoklasse repräsentiert jedes Element, das nicht durch sein Argument repräsentiert wird.
:where(): Die spezifitätsanpassende Pseudoklasse stimmt mit jedem Element überein, das mit einem der in der Liste angegebenen Selektoren übereinstimmt, ohne dabei eine spezifische Gewichtung hinzuzufügen. Die Liste ist vergebend.
:has(): Die relationale Pseudoklasse repräsentiert ein Element, wenn einer der relativen Selektoren beim Verankern am zugehörigen Element übereinstimmt.

Benutzerdefinierte Zustands-Pseudoklassen

Diese Pseudoklassen gelten für benutzerdefinierte Elemente.

:state(): Stimmt mit benutzerdefinierten Elementen überein, 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: Repräsentiert alle linken Seiten eines gedruckten Dokuments.
:right: Repräsentiert alle rechten Seiten eines gedruckten Dokuments.
:first: Repräsentiert die ersten Seite eines gedruckten Dokuments.
:blank: Repräsentiert eine leere Seite in einem gedruckten Dokument.

Ansichtsübergangs-Pseudoklassen

Diese Pseudoklassen beziehen sich auf Elemente, die an einem Ansichtsübergang beteiligt sind.

:active-view-transition: Stimmt mit dem Root-Element eines Dokuments überein, wenn ein Ansichtsübergang im Gange ist (aktiv) und stimmt nicht mehr überein, sobald der Übergang abgeschlossen ist.
:active-view-transition-type(): Stimmt mit dem Root-Element eines Dokuments überein, wenn ein bestimmter Ansichtsübergang im Gange ist (aktiv) und stimmt nicht mehr überein, sobald der Übergang abgeschlossen ist.

Syntax

css

selector:pseudo-class {
  property: value;
}

Wie bei regulären Klassen können Sie in einem Selektor so viele Pseudoklassen verketten, wie Sie möchten.

Alphabetisches Verzeichnis

Pseudoklassen, die durch eine Reihe von CSS-Spezifikationen definiert sind, umfassen:

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

:checked
:current Experimentell

:where()

Nicht standardisierte Pseudoklassen

Nicht standardisierte herstellerspezifische Pseudoklassen umfassen:

`-moz-` Präfix

Spezifikationen

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

Siehe auch

Pseudoelemente
CSS-Selektoren Modul

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Pseudoklassen

-moz- Präfix

Help improve MDN

`-moz-` Präfix