Pseudo-Klassen

Eine CSS Pseudo-Klasse ist ein Schlüsselwort, das einem Selektor hinzugefügt wird, um einen spezifischen Zustand des ausgewählten Elements (oder der Elemente) zu gestalten. Zum Beispiel kann die Pseudo-Klasse :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 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 zur Definition der Argumente (z.B. :dir()). Das Element, an das eine Pseudo-Klasse angehängt ist, wird als Anker-Element definiert (z.B. button im Fall von button:hover).

Pseudo-Klassen ermöglichen es Ihnen, einem Element einen Stil zuzuweisen, nicht nur in Bezug auf den Inhalt des Dokumentenbaums, sondern auch in Bezug auf externe Faktoren wie die Verlaufsgeschichte des Browsers (zum Beispiel :visited), den Status seines Inhalts (wie :checked bei bestimmten Formularelementen) 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 gestaltet werden.

Elementbezogene Pseudo-Klassen

Diese Pseudo-Klassen beziehen sich auf die grundlegende Identität von Elementen.

:defined: Passt zu jedem definierten Element.
:heading: Passt zu jedem Überschriftselement (<h1>-<h6>).

Pseudo-Klassen für Anzeigestatus eines Elements

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

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

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 aktiviert ist.
:disabled: Repräsentiert ein Benutzerschnittstellenelement, das deaktiviert ist.
:read-only: Repräsentiert jedes Element, das vom Benutzer nicht geändert werden kann.
:read-write: Repräsentiert jedes Element, das vom Benutzer bearbeitet werden kann.
:placeholder-shown: Passt zu einem Eingabeelement, das Platzhaltertext anzeigt. Zum Beispiel wird das placeholder-Attribut in den <input>- und <textarea>-Elementen abgeglichen.
:autofill: Passt, wenn ein <input> vom Browser automatisch ausgefüllt wurde.
:default: Passt zu einem oder mehreren UI-Elementen, die die Standardeinstellung unter einer Reihe von Elementen sind.
:checked: Passt, wenn Elemente wie Kontrollkästchen und Optionsfelder aktiviert sind.
:indeterminate: Passt zu UI-Elementen, wenn sie in einem unbestimmten Zustand sind.
:blank: Passt zu einem Benutzereingabeelement, das leer ist und eine leere Zeichenkette oder andere null Eingaben enthält.
:valid: Passt zu einem Element mit gültigem Inhalt. Zum Beispiel ein Eingabeelement mit dem Typ 'email', das eine gültig formatiert E-Mail-Adresse oder einen leeren Wert enthält, wenn das Feld nicht erforderlich ist.
:invalid: Passt zu einem Element mit ungültigem Inhalt. Zum Beispiel ein Eingabeelement mit dem Typ 'email' mit einem eingegebenen Namen.
:in-range: Gilt für Elemente mit Bereichseinschränkungen. Zum Beispiel ein Schieberegler, wenn der ausgewählte Wert im erlaubten Bereich liegt.
:out-of-range: Gilt für Elemente mit Bereichseinschrä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: 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 der Schreibrichtung.

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

Standortbezogene Pseudo-Klassen

Diese Pseudo-Klassen beziehen sich auf Links und auf gezielte Elemente innerhalb des aktuellen Dokuments.

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

Hinweis: Eine :target-within Pseudo-Klasse, um Elemente abzugleichen, die sind oder einen Nachkommen haben, der das Ziel der Dokument-URL ist, 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 sich in einem Zustand befinden können, in dem sie als abspielbar beschrieben werden, wie etwa ein Video.

:playing: Repräsentiert ein abspielbares Element, das abgespielt wird.
:paused: Repräsentiert ein abspielbares Element, das pausiert ist.
:seeking: Repräsentiert ein abspielbares Element, das derzeit eine Wiedergabeposition in der Medienressource sucht.
:buffering: Repräsentiert ein abspielbares Element, das abgespielt wird, aber vorübergehend gestoppt 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 tonabgebendes Element, das stummgeschaltet ist.
:volume-locked: Repräsentiert ein tonabgebendes Element, dessen Lautstärkepegel vom Browser gesperrt ist.

Zeitdimensionale Pseudo-Klassen

Diese Pseudo-Klassen gelten beim Betrachten von etwas, das eine zeitliche Komponente hat, wie z.B. eine WebVTT-Untertitelspur.

:current: Repräsentiert das Element oder den Vorfahren des Elements, das 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.

Baumstrukturbezogene 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 andere Kinder als Leerraumzeichen.
: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: Passt zu einem Element, das das erste seiner Geschwister ist.
:last-child: Passt zu einem Element, das das letzte seiner Geschwister ist.
:only-child: Passt zu einem Element, das keine Geschwister hat. Zum Beispiel ein Listenelement ohne andere 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 in 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 in einer Liste von Geschwisterelementen entsprechen und von hinten nach vorne gezählt werden.
:first-of-type: Passt zu einem Element, das das erste seiner Geschwister ist und auch einem bestimmten Typ-Selektor entspricht.
:last-of-type: Passt zu einem Element, das das letzte seiner Geschwister ist und auch einem bestimmten Typ-Selektor entspricht.
:only-of-type: Passt zu einem Element, das keine Geschwister des gewählten Typ-Selektors hat.

Schattenstruktur-Pseudo-Klassen

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

:host: Passt zum Schattenbaum des Schatten-Hosts.
:host(): Passt zu einem Element, das zu :host passt und mit einem der Selektoren in der bereitgestellten Liste übereinstimmt.
:host-context(): Wählt Elemente außerhalb des Schattenbaums im Kontext des Schatten-Hosts aus.
:has-slotted: Passt zu Slot-Elementen, die Inhalt zugewiesen bekommen haben.

Benutzeraktions-Pseudo-Klassen

Diese Pseudo-Klassen erfordern eine Interaktion des Benutzers, damit sie zutreffen, wie das Halten eines Zeigers über einem Element.

:hover: Passt, wenn ein Benutzer ein Element mit einem Zeigegerät bezeichnet, z.B. durch das 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 fokussiert ist.
:focus-visible: Passt, wenn ein Element fokussiert ist und der Benutzeragent identifiziert, dass das Element sichtbar fokussiert sein sollte.
:focus-within: Passt zu einem Element, auf das :focus zutrifft, plus jedem Element, das einen Nachkommen hat, auf den :focus zutrifft.
:target-current: Passt zum ::scroll-marker Pseudo-Element einer scroll-marker-group, die derzeit gescrollt wird, mit anderen Worten, dem aktiven Scroll-Marker.

Funktionale Pseudo-Klassen

Diese Pseudo-Klassen akzeptieren eine Selektorenliste oder fehlertolerante Selektorenliste als Parameter.

:is(): Die Matches-Any-Pseudo-Klasse passt zu jedem Element, das mit einem der Selektoren in der bereitgestellten Liste übereinstimmt. Die Liste ist fehlertolerant.
:not(): Die Verneinungs- oder Matches-None-Pseudo-Klasse repräsentiert jedes Element, das nicht durch ihr Argument dargestellt wird.
:where(): Die Spezifizitätsanpassungs-Pseudo-Klasse passt zu jedem Element, das mit einem der Selektoren in der bereitgestellten Liste übereinstimmt, ohne irgendein Spezifizitätsgewicht hinzuzufügen. Die Liste ist fehlertolerant.
:has(): Die relationale Pseudo-Klasse repräsentiert ein Element, wenn einer der relativen Selektoren ankert gegen das angehängte Element übereinstimmt.

Benutzerdefinierte Zustands-Pseudo-Klassen

Diese Pseudo-Klassen gelten für benutzerdefinierte Elemente.

:state(): Passt zu 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-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.

Ansichtstransitions-Pseudo-Klassen

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

:active-view-transition: Passt zum Wurzelelement eines Dokuments, wenn eine Ansichtstransition im Gange ist (aktiv) und hört auf zu passen, sobald die Transition abgeschlossen ist.
:active-view-transition-type(): Passt zum Wurzelelement eines Dokuments, wenn eine spezifische Ansichtstransition im Gange ist (aktiv) und hört auf zu passen, sobald die Transition abgeschlossen ist.

Syntax

css

selector:pseudo-class {
  property: value;
}

Wie bei regulären Klassen können Sie in einem Selektor so viele Pseudo-Klassen wie gewünscht aneinanderreihen.

Alphabetisches Verzeichnis

Pseudo-Klassen, die durch einen Satz von CSS-Spezifikationen definiert werden, umfassen die folgenden:

:blank (input) Experimentell
:blank (page)
: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

Help improve MDN

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

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