Pseudo-Klassen

Eine CSS Pseudo-Klasse ist ein Schlüsselwort, das einem Selektor hinzugefügt wird, um einen bestimmten Zustand des ausgewählten Elements zu stylen. Zum Beispiel kann die Pseudo-Klasse :hover verwendet werden, um einen Button auszuwählen, wenn der Zeiger eines Nutzers über den Button schwebt. 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, um die Argumente zu definieren (z.B. :dir()). Das Element, an dem eine Pseudo-Klasse angehängt ist, wird als Ankerelement 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 Navigationshistorie (zum Beispiel :visited), den Status seines Inhalts (wie :checked bei bestimmten Formularelementen) oder die Position der Maus (wie :hover, wodurch Sie wissen, ob die Maus über einem Element ist oder nicht) einen Stil zuzuweisen.

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: Entspricht jedem definierten Element.
:heading: Entspricht jedem Überschriftselement (<h1>-<h6>).

Anzeigezustands-Pseudo-Klassen

Diese Pseudo-Klassen ermöglichen die Auswahl von Elementen basierend auf ihren Anzeigestatus.

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

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

:enabled: Repräsentiert ein Benutzeroberflächenelement, das aktiviert ist.
:disabled: Repräsentiert ein Benutzeroberflächenelement, das deaktiviert ist.
:read-only: Repräsentiert ein beliebiges Element, das vom Nutzer nicht verändert werden kann.
:read-write: Repräsentiert ein beliebiges Element, das vom Nutzer bearbeitet werden kann.
:placeholder-shown: Entspricht einem Eingabeelement, das Platzhaltertext anzeigt. Zum Beispiel wird es das placeholder-Attribut bei den Elementen <input> und <textarea> entsprechen.
:autofill: Entspricht, wenn ein <input> vom Browser automatisch ausgefüllt wurde.
:default: Entspricht einem oder mehreren UI-Elementen, die die Standardeinstellung unter einer Gruppe von Elementen sind.
:checked: Entspricht, wenn Elemente wie Kontrollkästchen und Optionsbuttons aktiviert sind.
:indeterminate: Entspricht UI-Elementen, wenn sie sich in einem unbestimmten Zustand befinden.
:blank: Entspricht einem Benutzereingabe-Element, das leer ist, einen leeren String oder andere null-Eingaben enthält.
:valid: Entspricht einem Element mit gültigen Inhalten. Zum Beispiel ein Eingabeelement vom Typ 'email', das eine gültig geformte E-Mail-Adresse oder einen leeren Wert enthält, wenn die Kontrolle nicht erforderlich ist.
:invalid: Entspricht einem Element mit ungültigen Inhalten. Zum Beispiel ein Eingabeelement vom 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 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: Entspricht, wenn ein Formularelement erforderlich ist.
:optional: Entspricht, wenn ein Formularelement optional ist.
:user-valid: Repräsentiert ein Element mit korrekter Eingabe, jedoch nur, wenn der Nutzer damit interagiert hat.
:user-invalid: Repräsentiert ein Element mit falscher Eingabe, jedoch nur, wenn der Nutzer damit interagiert hat.

Sprachliche Pseudo-Klassen

Diese Pseudo-Klassen spiegeln die Sprache des Dokuments wider und ermöglichen die Auswahl von Elementen basierend auf Sprache oder Schriftlaufrichtung.

:dir(): Die Richtungs-Pseudo-Klasse wählt ein Element basierend auf seiner Richtungsanweisung aus, wie durch die Sprache des Dokuments bestimmt.
:lang(): Wählen Sie ein Element basierend auf seiner Inhaltssprache aus.

Standort-Pseudo-Klassen

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

:any-link: Entspricht einem Element, wenn das Element entweder :link oder :visited entsprechen würde.
:link: Entspricht Links, die noch nicht besucht wurden.
:visited: Entspricht Links, die besucht wurden.
:local-link: Entspricht Links, deren absolute URL identisch mit der Ziel-URL ist. Zum Beispiel Anker-Links zur selben Seite.
:target: Entspricht dem Element, das das Ziel der Dokument-URL ist.
:scope: Repräsentiert Elemente, die ein Referenzpunkt für Selektoren sind, um gegen sie zu passen.

Hinweis: Eine :target-within Pseudo-Klasse, um Elemente zu entsprechen, die oder deren Nachfahren das Ziel der Dokument-URL sind, wurde definiert, aber aus der Spezifikation entfernt. Verwenden Sie :has(:target) für diesen Zweck.

Ressourcenstatus-Pseudo-Klassen

Diese Pseudo-Klassen gelten für Medien, die in einem Zustand sein können, in dem sie als abspielend beschrieben werden würden, wie 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 derzeit eine Wiedergabeposition in der Mediendatei sucht.
:buffering: Repräsentiert ein abspielbares Element, das spielt, aber vorübergehend gestoppt ist, weil es die Mediendatei herunterlädt.
:stalled: Repräsentiert ein abspielbares Element, das spielt, aber angehalten ist, weil es die Mediendatei nicht herunterladen kann.
:muted: Repräsentiert ein geräuscherzeugendes Element, das stummgeschaltet ist.
:volume-locked: Repräsentiert ein geräuscherzeugendes Element, dessen Lautstärkepegel vom Browser gesperrt ist.

Zeitdimensionale Pseudo-Klassen

Diese Pseudo-Klassen gelten beim Betrachten von etwas, das zeitlich gesteuert ist, wie ein WebVTT Untertitel-Track.

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

Baumstrukturale Pseudo-Klassen

Diese Pseudo-Klassen 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 Leerzeichen-Zeichen.
: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, wobei von hinten nach vorne gezählt wird.
:first-child: Entspricht einem Element, das das erste seiner Geschwister ist.
:last-child: Entspricht einem Element, das das letzte seiner Geschwister ist.
:only-child: Entspricht einem Element, das keine Geschwister hat. Zum Beispiel ein Listenelement ohne weitere Listenelemente in dieser Liste.
:heading(): Verwendet An+B Notation, um Überschriftselemente (<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 und rückwärts von hinten gezählt werden.
:first-of-type: Entspricht einem Element, das das erste seiner Geschwister ist und auch einem bestimmten Typ-Selektor entspricht.
:last-of-type: Entspricht einem Element, das das letzte seiner Geschwister ist und auch einem bestimmten Typ-Selektor entspricht.
:only-of-type: Entspricht einem Element, das keine Geschwister des gewählten Typ-Selektors hat.

Schattenstrukturale Pseudo-Klassen

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

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

Benutzeraktions-Pseudo-Klassen

Diese Pseudo-Klassen erfordern eine Interaktion des Benutzers, damit sie angewendet werden können, wie z.B. das Halten eines Mauszeigers über ein Element.

:hover: Entspricht, wenn ein Benutzer ein Element mit einem Zeigegerät kennzeichnet, wie das Halten des Mauszeigers über das Element.
:active: Entspricht, wenn ein Element vom Benutzer aktiviert wird. Zum Beispiel, wenn das Element angeklickt wird.
:focus: Entspricht, wenn ein Element den Fokus hat.
:focus-visible: Entspricht, wenn ein Element den Fokus hat und der Benutzeragent identifiziert, dass das Element sichtbar fokussiert sein sollte.
:focus-within: Entspricht einem Element, auf das :focus angewendet wird, plus jedem Element, das einen Nachfahren hat, auf den :focus angewendet wird.
:target-current: Entspricht dem ::scroll-marker Pseudo-Element einer scroll-marker-group, zu der aktuell gescrollt wird, in anderen Worten, dem aktiven Scroll-Marker.

Funktionale Pseudo-Klassen

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

:is(): Die Matches-Any Pseudo-Klasse entspricht jedem Element, das einem der Selektoren in der bereitgestellten Liste entspricht. Die Liste ist nachgiebig.
:not(): Die Negations- oder Matches-None-Pseudo-Klasse repräsentiert jedes Element, das nicht durch ihr Argument dargestellt wird.
:where(): Die Spezifitätsanpassungs-Pseudo-Klasse entspricht jedem Element, das einem der Selektoren in der bereitgestellten Liste entspricht, ohne Spezifitätsgewicht hinzuzufügen. Die Liste ist nachgiebig.
:has(): Die relationale Pseudo-Klasse repräsentiert ein Element, wenn einer der relativen Selektoren mit dem angehängten Element übereinstimmt.

Benutzerdefinierte Zustands-Pseudo-Klassen

Diese Pseudo-Klassen gelten für benutzerdefinierte Elemente.

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

Seiten-Pseudo-Klassen

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

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

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

Syntax

css

selector:pseudo-class {
  property: value;
}

Wie bei regulären Klassen können Sie beliebig viele Pseudo-Klassen in einem Selektor verketten.

Alphabetisches Verzeichnis

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

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

:checked
:current Experimentell

:where()

Nicht-standardisierte Pseudo-Klassen

Nicht-standardisierte, herstellerspezifische Pseudo-Klassen beinhalten:

`-moz-` Präfix

Spezifikationen

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

Siehe auch

Pseudo-Elemente
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

Pseudo-Klassen

-moz- Präfix

Help improve MDN

`-moz-` Präfix