Pseudoklassen

Eine CSS Pseudoklasse ist ein Schlüsselwort, das zu einem Selektor hinzugefügt wird, um einen bestimmten Zustand der ausgewählten Elemente zu gestalten. Zum Beispiel kann die Pseudoklasse :hover verwendet werden, um einen Button auszuwählen, wenn der Zeiger eines Benutzers ü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 auch 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 Dokumentenbaums, sondern auch in Bezug auf externe Faktoren wie den Verlauf des Navigators (zum Beispiel :visited), den Status seines Inhalts (wie :checked bei bestimmten Formularelementen) oder die Position der Maus (wie :hover, die angibt, ob die Maus über einem Element ist 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 Kernidentität von Elementen.

:defined: Passt auf jedes definierte Element.
:heading: Passt auf jedes Überschriftselement (<h1>-<h6>).

Pseudoklassen für Anzeigezustände von Elementen

Diese Pseudoklassen ermöglichen die Auswahl von Elementen basierend auf ihren Anzeigezuständen.

:open: Passt auf ein Element, das geöffnet oder geschlossen sein kann und derzeit geöffnet ist.
:popover-open: Passt auf ein Popover-Element, das sich derzeit im Anzeigenzustand 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-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: Repräsentiert ein Benutzerschnittstellenelement, das aktiviert 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: Passt auf ein Eingabeelement, das Platzhaltertext anzeigt. Zum Beispiel passt es auf das placeholder-Attribut in den <input>- und <textarea>-Elementen.
:autofill: Passt, wenn ein <input>-Element vom Browser automatisch ausgefüllt wurde.
:default: Passt auf ein oder mehrere UI-Elemente, die die Standardeinstellung innerhalb eines Elementesets 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 Benutzereingabeelement, das leer ist, einen leeren String oder eine andere nullartige Eingabe enthält.
:valid: Passt auf ein Element mit gültigem Inhalt. Zum Beispiel ein Eingabeelement des Typs 'email', das eine gültige E-Mail-Adresse enthält oder einen leeren Wert, wenn das Kontrollfeld nicht erforderlich ist.
:invalid: Passt auf ein Element mit ungültigem Inhalt. Zum Beispiel ein Eingabeelement des Typs 'email' mit einem eingegebenen Namen.
:in-range: Gilt für Elemente mit Bereichsbeschränkungen. Zum Beispiel ein Schieberegler-Kontrollfeld, wenn der ausgewählte Wert im zulässigen Bereich liegt.
:out-of-range: Gilt für Elemente mit Bereichsbeschränkungen. Zum Beispiel ein Schieberegler-Kontrollfeld, 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, jedoch nur, wenn der Benutzer damit interagiert hat.
:user-invalid: Repräsentiert ein Element mit inkorrekter Eingabe, jedoch nur, wenn der Benutzer damit interagiert hat.

Sprachliche Pseudoklassen

Diese Pseudoklassen reflektieren die Dokumentsprache und ermöglichen die Auswahl von Elementen basierend auf Sprache oder Schreibrichtung.

:dir(): Die Richtungs-Pseudoklasse wählt ein Element basierend auf seiner durch die Dokumentsprache bestimmten Richtung.
:lang(): Wählt ein Element basierend auf seiner Inhaltssprache.

Standort-Pseudoklassen

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

:any-link: Passt auf ein Element, wenn das Element entweder :link oder :visited entspricht.
:link: Passt auf Links, die noch nicht besucht wurden.
:visited: Passt auf Links, die bereits besucht wurden.
:local-link: Passt auf Links, deren absolute URL dieselbe ist wie die Ziel-URL. Zum Beispiel Anker-Links zur selben Seite.
:target: Passt auf das Element, das das Ziel der Dokument-URL ist.
:scope: Repräsentiert Elemente, die einen Referenzpunkt für Selektoren darstellen, die eine Übereinstimmung hoffen.

Hinweis: Eine :target-within Pseudoklasse, um Elemente abzugleichen, die ein Nachfahre oder selbst das Ziel der Dokument-URL sind, war definiert wurde aber aus der Spezifikation entfernt. Verwenden Sie :has(:target) für diesen Zweck.

Ressourcenstatus-Pseudoklassen

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

:playing: Repräsentiert ein spielbares Element, das abgespielt wird.
:paused: Repräsentiert ein spielbares Element, das pausiert ist.
:seeking: Repräsentiert ein spielbares Element, das momentan eine Abspielposition in der Medienressource sucht.
:buffering: Repräsentiert ein spielbares Element, das gespielt wird, aber vorübergehend gestoppt ist, weil es die Medienressource herunterlädt.
:stalled: Repräsentiert ein spielbares Element, das gespielt 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, dessen Lautstärke durch den Browser gesperrt ist.

Zeitdimensionale Pseudoklassen

Diese Pseudoklassen gelten, wenn etwas betrachtet wird, das eine Zeitstruktur hat, wie zum Beispiel ein WebVTT-Untertiteltrack.

:current: Repräsentiert das Element oder ein Vorfahrelement des Elements, das gerade 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 Pseudoklassen

Diese Pseudoklassen beziehen sich auf den Standort eines Elements innerhalb des Dokumentbaums.

: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 Leerzeichenzeichen.
:nth-child(): Verwendet An+B-Notation, um Elemente aus einer Liste von Geschwisterelementen auszuwählen.
:nth-last-child(): Verwendet An+B-Notation, um Elemente aus einer Liste von Geschwisterelementen auszuwählen, rückwärts von 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.
:heading(): Verwendet An+B-Notation, um Übschriftselemente (<h1>-<h6>) auszuwählen.
:nth-of-type(): Verwendet 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 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 Typ-Selektor entspricht.
:last-of-type: Passt auf ein Element, das das letzte seiner Geschwister ist und auch einem bestimmten Typ-Selektor entspricht.
:only-of-type: Passt auf ein Element, das keine Geschwister des gewählten Typ-Selektors hat.

Schatten-strukturelle Pseudoklassen

Diese Pseudoklassen beziehen sich auf das Schatten DOM.

:host: Passt auf den Schattenbaum des Schattenhosts.
:host(): Passt auf ein Element, das :host entspricht und einem der in der Liste bereitgestellten Selektoren entspricht.
:host-context(): Wählt Elemente außerhalb des Schattenbaums im Kontext des Schattenhosts aus.
:has-slotted: Passt auf Schlitz-Elemente zu, die Inhalt zugewiesen bekommen haben.

Benutzeraktions-Pseudoklassen

Diese Pseudoklassen erfordern eine Interaktion durch den Benutzer, damit sie angewendet werden, wie z.B. das Bewegen eines Mauszeigers über ein Element.

:hover: Passt, wenn ein Benutzer ein Element mit einem Zeigegerät, wie das Halten des Mauszeigers über das Element, bezeichnet.
: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, sowie auf jedes Element, das einen Nachfahren hat, auf den :focus zutrifft.
:target-current: Passt auf das ::scroll-marker Pseudoelement einer scroll-marker-group, die aktuell angescrollt ist, mit anderen Worten, die aktive Scroll-Markierung.

Funktionale Pseudoklassen

Diese Pseudoklassen akzeptieren eine Selector-Liste oder eine verzeihende Selector-Liste als Parameter.

:is(): Die matches-any Pseudoklasse passt auf jedes Element, das einem der in der Liste bereitgestellten Selektoren entspricht. Die Liste ist verzeihend.
:not(): Die Negation, oder matches-none, Pseudoklasse repräsentiert ein Element, das nicht durch sein Argument repräsentiert wird.
:where(): Die Spezifität Anpassungs-Pseudoklasse passt auf jedes Element, das einem der in der Liste bereitgestellten Selektoren entspricht, ohne jegliches Spezifitätsgewicht hinzuzufügen. Die Liste ist verzeihend.
:has(): Die relationale Pseudoklasse repräsentiert ein Element, wenn einer der relativen Selektoren übereinstimmt, wenn er gegen das angehängte Element verankert ist.

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

View-Transition-Pseudoklassen

Diese Pseudoklassen beziehen sich auf Elemente, die an einer View-Transition beteiligt sind.

:active-view-transition: Passt auf das Root-Element eines Dokuments, wenn eine View-Transition im Gange ist (active) und hört auf, zu passen, sobald die Transition abgeschlossen ist.
:active-view-transition-type(): Passt auf das Root-Element eines Dokuments, wenn eine bestimmte View-Transition im Gange ist (active) und hört auf, zu passen, sobald die Transition abgeschlossen ist.

Syntax

css

selector:pseudo-class {
  property: value;
}

Wie reguläre Klassen können Sie in einem Selektor beliebig viele Pseudoklassen verketten.

Alphabetischer Index

Von einer Reihe von CSS-Spezifikationen definierte Pseudoklassen umfassen folgendes:

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