Pseudo-Klassen

Eine CSS Pseudo-Klasse ist ein Schlüsselwort, das einem Selektor hinzugefügt wird und es Ihnen ermöglicht, einen bestimmten Zustand der ausgewählten Elemente 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, und dieser ausgesuchte 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 das eine Pseudo-Klasse angehängt wird, wird als Ankerelement definiert (z. B. button im Fall von button:hover).

Pseudo-Klassen ermöglichen es Ihnen, einen Stil auf ein Element nicht nur in Bezug auf den Inhalt des Dokumentenbaums anzuwenden, sondern auch in Bezug auf externe Faktoren wie die Historie des Navigators (zum Beispiel :visited), den Status seines Inhalts (wie :checked für bestimmte Formularelemente) oder die Position der Maus (wie :hover, das Ihnen anzeigt, ob die Maus über einem Element ist oder nicht).

Hinweis: Im Gegensatz zu Pseudo-Klassen können mit Pseudo-Elementen spezifische Teile eines Elements gestylt werden.

Elementare Pseudo-Klassen

Diese Pseudo-Klassen beziehen sich auf die Kernidentität der Elemente.

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

Element-Anzeigestatus-Pseudo-Klassen

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

:open: Passt auf ein Element, das entweder geöffnet oder geschlossen sein kann und gerade offen ist.
:popover-open: Passt auf ein Popover-Element, das sich aktuell im Anzeigestatus befindet.
:modal: Passt auf ein Element, das sich in einem Zustand befindet, in dem es alle Interaktionen mit externen Elementen ausschließt, bis die Interaktion zurückgewiesen wurde.
:fullscreen: Passt auf ein Element, das sich momentan im Vollbildmodus befindet.
:picture-in-picture: Passt auf ein Element, das sich momentan im Bild-in-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 Benutzerschnittstellenelement, das in einem aktivierten Zustand ist.
:disabled: Repräsentiert ein Benutzerschnittstellenelement, das in einem deaktivierten Zustand ist.
:read-only: Repräsentiert jedes Element, das nicht vom Benutzer geändert werden kann.
:read-write: Repräsentiert jedes Element, das vom Benutzer bearbeitbar ist.
:placeholder-shown: Passt auf ein Eingabeelement, das einen 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 eines oder mehrere UI-Elemente, die das Standard-Element in einer Gruppe 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, einen leeren String oder andere null Eingaben enthält.
:valid: Passt auf ein Element mit gültigem Inhalt. Zum Beispiel ein Eingabeelement mit dem Typ 'email', das eine gültige E-Mail-Adresse oder einen leeren Wert enthält, 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 innerhalb des zulässigen Bereichs liegt.
:out-of-range: Gilt für Elemente mit Bereichsbeschränkungen. Zum Beispiel ein Schieberegler, 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 falscher Eingabe, jedoch nur, wenn der Benutzer damit interagiert hat.

Sprachliche Pseudo-Klassen

Diese Pseudo-Klassen spiegeln die Dokumentensprache wider und ermöglichen die Auswahl von Elementen basierend auf der Sprache oder Schreibrichtung.

:dir(): Die Richtungs-Pseudo-Klasse wählt ein Element basierend auf seiner Richtung, wie sie durch die Dokumentensprache bestimmt wird.
:lang(): Wählt ein Element basierend auf seiner Inhaltsprache aus.

Standort-Pseudo-Klassen

Diese Pseudo-Klassen 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 bereits besucht wurden.
:local-link: Passt auf Links, deren absolute URL mit der Ziel-URL übereinstimmt. Zum Beispiel Ankerlinks zur selben Seite.
:target: Passt auf das Element, das das Ziel der Dokument-URL ist.
:scope: Repräsentiert Elemente, die ein Referenzpunkt für Selektoren sind, gegen die abgeglichen wird.

Hinweis: Eine :target-within Pseudo-Klasse, um Elemente zu markieren, die selbst oder deren Nachkommen 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 werden auf Medien angewendet, die in einem Zustand sein können, in dem sie als abgespielt beschrieben würden, wie zum Beispiel ein Video.

:playing: Repräsentiert ein Element, das abgespielt wird.
:paused: Repräsentiert ein Element, das pausiert ist.
:seeking: Repräsentiert ein Element, das momentan nach einer Wiedergabeposition in der Mediendatei sucht.
:buffering: Repräsentiert ein Element, das abgespielt wird, aber vorübergehend angehalten ist, weil die Mediendatei heruntergeladen wird.
:stalled: Repräsentiert ein Element, das abgespielt wird, aber angehalten ist, weil die Mediendatei nicht heruntergeladen werden kann.
:muted: Repräsentiert ein klangerzeugendes Element, das stummgeschaltet ist.
:volume-locked: Repräsentiert ein klangerzeugendes Element, bei dem die Lautstärke durch den Browser gesperrt ist.

Zeitdimensionale Pseudo-Klassen

Diese Pseudo-Klassen gelten, wenn etwas betrachtet wird, das Timing hat, wie eine WebVTT Untertitelspur.

:current: Repräsentiert das Element oder einen 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.

Baumstrukturelle Pseudo-Klassen

Diese Pseudo-Klassen beziehen sich auf den Standort 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 Leerzeichen.
:nth-child(): Verwendet An+B-Notation, um Elemente aus einer Liste von Geschwistern auszuwählen.
:nth-last-child(): Verwendet An+B-Notation, um Elemente aus einer Liste von Geschwistern auszuwählen, rückwärts vom Ende der Liste zählen.
: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 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 Geschwistern auszuwählen, die einem bestimmten Typ aus einer Liste von Geschwistern entsprechen.
:nth-last-of-type(): Verwendet An+B-Notation, um Elemente aus einer Liste von Geschwistern auszuwählen, die einem bestimmten Typ aus einer Liste von Geschwistern entsprechen, rückwärts vom Ende der Liste zählen.
:first-of-type: Passt auf ein Element, das das erste seiner Geschwister ist und einem bestimmten Typselektor entspricht.
:last-of-type: Passt auf ein Element, das das letzte seiner Geschwister ist und einem bestimmten Typselektor entspricht.
:only-of-type: Passt auf ein Element, das keine Geschwister des gewählten Typselektors hat.

Schatten-strukturelle Pseudo-Klassen

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

:host: Passt auf den Schattenbaum-Host des Shadow-DOM.
:host(): Passt auf ein Element, das auf :host passt und einem der in der Liste angegebenen Selektoren entspricht.
:host-context(): Wählt Elemente außerhalb des Shadow-DOM im Kontext des Schattenbaum-Hosts aus.
:has-slotted: Passt auf Schlitz-Elemente, denen Inhalt zugewiesen wurde.

Benutzeraktions-Pseudo-Klassen

Diese Pseudo-Klassen erfordern eine Interaktion durch den Benutzer, um angewendet zu werden, wie das Halten eines Mauszeigers über einem Element.

:hover: Passt, wenn ein Benutzer ein Element mit einem Zeigegerät anzeigt, wie das Halten des Mauszeigers über dem Element.
:active: Passt, wenn ein Element durch den Benutzer aktiviert wird. Zum Beispiel, wenn auf das Element geklickt wird.
:focus: Passt, wenn ein Element den Fokus hat.
:focus-visible: Passt, wenn ein Element den Fokus hat und der Benutzer-Agent erkennt, dass das Element sichtbar fokussiert sein sollte.
:focus-within: Passt auf ein Element, auf das :focus angewendet wird, sowie jedes Element, das einen Nachkommen hat, auf den :focus angewendet wird.
:target-current: Passt auf das ::scroll-marker Pseudo-Element einer scroll-marker-group, auf die momentan gescrollt wird, mit anderen Worten, der aktive Scrollmarker.

Funktionale Pseudo-Klassen

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

:is(): Die 'matches-any'-Pseudo-Klasse passt auf jedes Element, das einem der in der Liste angegebenen Selektoren entspricht. Die Liste ist verzeihend.
:not(): Die Negations- oder 'matches-none'-Pseudo-Klasse repräsentiert jedes Element, das nicht durch ihr Argument repräsentiert wird.
:where(): Die Spezifitätsanpassungs-Pseudo-Klasse passt auf jedes Element, das einem der in der Liste angegebenen Selektoren entspricht, ohne ein Spezifizitätsgewicht hinzuzufügen. Die Liste ist verzeihend.
:has(): Die relationale Pseudo-Klasse repräsentiert ein Element, wenn einer der relativen Selektoren beim Ankern gegen das angehängte Element übereinstimmt.

Benutzerdefinierte Zustands-Pseudo-Klassen

Diese Pseudo-Klassen gelten für benutzerdefinierte Elemente.

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

Seiten-Pseudo-Klassen

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

Diese Pseudo-Klassen beziehen sich auf Elemente, die an einem view transition beteiligt sind.

:active-view-transition: Passt auf das Root-Element eines Dokuments, wenn ein view transition im Gange ist (aktiv) und hört auf zu passen, sobald der Übergang abgeschlossen ist.
:active-view-transition-type(): Passt auf das Root-Element eines Dokuments, wenn ein spezifischer view transition im Gange ist (aktiv) und hört auf zu passen, 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 Pseudo-Klassen verketten, wie Sie möchten.

Alphabetischer Index

Durch eine Reihe von CSS-Spezifikationen definierte Pseudo-Klassen umfassen folgende:

: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

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