Pseudo-Klassen

Eine CSS Pseudo-Klasse ist ein Schlüsselwort, das zu einem Selektor hinzugefügt wird und es Ihnen ermöglicht, Elemente basierend auf Informationen auszuwählen, die außerhalb des Dokumentenbaums liegen, wie zum Beispiel ein spezifischer Zustand der ausgewählten Elemente. Zum Beispiel kann die Pseudo-Klasse :hover verwendet werden, um einen Button zu stylen, wenn der Zeiger eines Benutzers darüber schwebt.

css

/* Any button over which the user's pointer is hovering */
button:hover {
  color: blue;
}

Eine Pseudo-Klasse besteht aus einem Doppelpunkt (:), gefolgt von dem 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 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 Dokumentbaums, sondern auch in Bezug auf externe Faktoren, wie die Verlaufsgeschichte des Browsers (:visited, zum Beispiel), den Status seines Inhalts (wie :checked bei bestimmten Formelementen) oder die Position der Maus (wie :hover, was Ihnen mitteilt, ob die Maus über einem Element ist oder nicht).

Hinweis: Im Gegensatz zu Pseudo-Klassen können Pseudo-Elemente zum Stylen eines spezifischen Teils eines Elements verwendet werden.

Elementare Pseudo-Klassen

Diese Pseudo-Klassen beziehen sich auf die Kerneigenschaft von Elementen.

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

Anzeigenzustand Pseudo-Klassen für Elemente

Diese Pseudo-Klassen ermöglichen die Auswahl von Elementen basierend auf ihren Anzeigzuständen.

:open: Passt zu einem Element, das geöffnet oder geschlossen sein kann und derzeit geöffnet ist.
:popover-open: Passt zu einem Popover-Element, das sich derzeit im anzeigbaren Zustand befindet.
:modal: Passt zu einem Element, das sich in einem Zustand befindet, in dem es alle Interaktion mit Elementen außerhalb davon ausschließt, bis die Interaktion beendet wird.
:fullscreen: Passt zu einem Element, das sich derzeit im Vollbildmodus befindet.
:picture-in-picture: Passt zu einem Element, das sich derzeit im Picture-in-Picture-Modus befindet.
:xr-overlay: Passt zu dem DOM-Overlay-Element während einer immersiven AR- oder VR-Session.

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 UI-Element, das im aktivierten Zustand ist.
:disabled: Repräsentiert ein UI-Element, das im deaktivierten Zustand ist.
:read-only: Repräsentiert jedes Element, das vom Benutzer nicht geändert werden kann.
:read-write: Repräsentiert jedes Element, das vom Benutzer bearbeitbar ist.
:placeholder-shown: Passt zu einem Eingabeelement, das Platzhaltertext anzeigt. Zum Beispiel wird es das placeholder-Attribut in den <input>- und <textarea>-Elementen entsprechen.
:autofill: Passt, wenn ein <input> vom Browser automatisch ausgefüllt wurde.
:default: Passt zu einem oder mehreren UI-Elementen, die das Standardelement innerhalb einer Gruppe 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 Benutzereingabe-Element, das leer ist, ein leeres Zeichenkette oder eine andere Null-Eingabe enthält.
:valid: Passt zu einem Element mit gültigen Inhalten. Zum Beispiel ein Eingabefeld des Typs 'email', das eine korrekt formatierte E-Mail-Adresse enthält, oder einen leeren Wert, wenn die Kontrolle nicht erforderlich ist.
:invalid: Passt zu einem Element mit ungültigen Inhalten. Zum Beispiel ein Eingabefeld des Typs 'email' mit einem eingegebenen Namen.
:in-range: Gilt für Elemente mit Reichweitenbeschränkungen. Zum Beispiel ein Schieberegler, wenn der ausgewählte Wert im erlaubten Bereich liegt.
:out-of-range: Gilt für Elemente mit Reichweitenbeschrä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, aber nur, wenn der Benutzer es bearbeitet hat.
:user-invalid: Repräsentiert ein Element mit falscher Eingabe, aber nur, wenn der Benutzer es bearbeitet hat.

Sprachliche Pseudo-Klassen

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

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

Ortsbezogene 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 :link oder :visited entsprechen 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 die gleiche ist wie die Ziel-URL. Zum Beispiel Anker-Links zur gleichen Seite.
:target: Passt zum Element, das das Ziel der Dokumenten-URL ist.
:scope: Repräsentiert Elemente, die einen Bezugspunkt für Selektoren darstellen, die passen sollen.

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

Ressourcen-Zustand Pseudo-Klassen

Diese Pseudo-Klassen gelten für Medien, die in einem Zustand sein können, in dem sie als spielend beschrieben werden können, wie ein Video.

:playing: Repräsentiert ein abspielbares Element, das aktuell abgespielt wird.
:paused: Repräsentiert ein abspielbares Element, das angehalten ist.
:seeking: Repräsentiert ein abspielbares Element, das gerade eine Wiedergabeposition in der Mediendatei sucht.
:buffering: Repräsentiert ein abspielbares Element, das spielt, aber temporär gestoppt ist, weil es die Mediendatei herunterlädt.
:stalled: Repräsentiert ein abspielbares Element, das spielt, aber gestoppt ist, weil es die Mediendatei nicht herunterladen kann.
:muted: Repräsentiert ein klangerzeugendes Element, das stummgeschaltet ist.
:volume-locked: Repräsentiert ein klangerzeugendes Element, dessen Lautstärkepegel durch den Browser gesperrt ist.

Zeitdimensionale Pseudo-Klassen

Diese Pseudo-Klassen gelten beim Ansehen von etwas, das Timing hat, wie beispielsweise ein WebVTT Untertitel-Track.

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

Baumstruktur-Pseudo-Klassen

Diese Pseudo-Klassen beziehen sich auf die Position 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, rückwärts vom Ende der Liste zählend.
: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 Überschriftenelemente (<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 zählend.
: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 ausgewählten Typ-Selectors hat.

Schattenstruktur-Pseudo-Klassen

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

:host: Passt zum Schattenbaum-Wirten.
:host(): Passt zu einem Element, das :host entspricht und zu irgendeinem der bereitgestellten Selektoren in der Liste passt.
:host-context(): Wählt Elemente außerhalb des Schattenbaums im Kontext des Schattenwirts.
:has-slotted: Passt zu Slot-Elementen, denen Inhalte zugewiesen wurden.

Nutzeraktions-Pseudo-Klassen

Diese Pseudo-Klassen erfordern eine Interaktion durch den Benutzer, um anzuwenden, wie z. B. das Überfahren eines Elements mit dem Mauszeiger.

:hover: Passt, wenn ein Benutzer ein Element mit einem Zeigegerät bezeichnet, wie z.B. das Halten des Mauszeigers über dem Element.
:active: Passt, wenn ein Element vom 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 Benutzeragent erkennt, dass das Element sichtbar fokussiert werden sollte.
:focus-within: Passt zu einem Element, auf das :focus zutrifft, sowie zu jedem Element, das einen Nachkommen hat, auf den :focus zutrifft.
:target-current: Passt zum ::scroll-marker Pseudo-Element einer scroll-marker-group, das derzeit gerollt ist, mit anderen Worten, der aktive Scroll-Marker.

Funktionale Pseudo-Klassen

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

:is(): Die Zu-jeglichem-passende Pseudo-Klasse passt zu jedem Element, das zu einem der bereitgestellten Selektoren in der Liste passt. Die Liste ist nachsichtsvoll.
:not(): Die Negierungs-, oder Zu-keinem-passende-Pseudo-Klasse repräsentiert jedes Element, das nicht durch ihr Argument repräsentiert wird.
:where(): Die Spezifitätsanpassende Pseudo-Klasse passt zu jedem Element, das zu einem der bereitgestellten Selektoren in der Liste passt, ohne jegliche Spezifikationsgewichtung hinzuzufügen. Die Liste ist nachsichtig.
:has(): Die relationale Pseudo-Klasse repräsentiert ein Element, wenn eines der relativen Selektoren übereinstimmt, wenn es gegen das angeheftete Element verankert ist.

Benutzerdefinierte Zustandspseudo-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 Druckdokument und werden mit der @page Regel verwendet.

:left: Repräsentiert alle linken Seiten eines Druckdokuments.
:right: Repräsentiert alle rechten Seiten eines Druckdokuments.
:first: Repräsentiert die erste Seite eines Druckdokuments.
:blank: Repräsentiert eine leere Seite in einem Druckdokument.

Ansichtsübergang-Pseudo-Klassen

Diese Pseudo-Klassen beziehen sich auf Elemente, die in einen Ansichtsübergang involviert sind.

:active-view-transition: Passt zum Wurzelelement eines Dokuments, wenn ein Ansichtsübergang in Gang ist (aktiv) und hört auf zu passen, sobald der Übergang abgeschlossen ist.
:active-view-transition-type(): Passt zum Wurzelelement eines Dokuments, wenn ein spezifizierter Ansichtsübergang in Gang ist (aktiv) und hört auf zu passen, sobald der Übergang abgeschlossen ist.

Syntax

css

selector:pseudo-class {
  property: value;
}

Ähnlich wie bei regulären Klassen, können Sie so viele Pseudo-Klassen wie gewünscht in einem Selektor verketten.

Alphabetisches Verzeichnis

Pseudo-Klassen, die durch eine Reihe von CSS-Spezifikationen definiert sind, umfassen folgende:

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

:checked
:current Experimentell

:where()

:xr-overlay Experimentell

Nicht-standardisierte Pseudo-Klassen

Nicht-standardisierte, herstellerspezifische Pseudo-Klassen umfassen:

`-moz-` Präfix

Spezifikationen

Spezifikation
HTML # pseudo-classes
Selectors Level 4
CSS Scope
CSS Paged Media Module Level 3

Siehe auch

Pseudo-Elemente
CSS-Selektoren- Modul

Help improve MDN

Erfahren Sie, wie Sie beitragen können 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