Pseudoklassen

Eine CSS Pseudoklasse ist ein Schlüsselwort, das zu einem Selektor hinzugefügt wird, um Elemente auszuwählen, die auf Informationen basieren, die außerhalb des Dokumentbaums liegen, wie z. B. ein bestimmter Zustand des ausgewählten Elements (oder der Elemente). Beispielsweise kann die Pseudoklasse :hover verwendet werden, um einen Button zu gestalten, wenn der Zeiger eines Benutzers darüber schwebt.

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, um die Argumente zu definieren (z. B. :dir()). Das Element, an dem eine Pseudoklasse angehängt ist, ist 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 Dokumentbaums, sondern auch in Bezug auf externe Faktoren wie die Verlaufshistorie des Browsers (zum Beispiel :visited), den Status seines Inhalts (wie :checked auf bestimmten Formularelementen) oder die Position der Maus (wie :hover, die Auskunft darüber gibt, ob die Maus über einem Element ist oder nicht) einen Stil anzuwenden.

Hinweis: Im Gegensatz zu Pseudoklassen können Pseudoelemente verwendet werden, um einen bestimmten 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 Überschriftenelement (<h1>-<h6>).

Pseudoklassen für Elementanzeigestatus

Diese Pseudoklassen ermöglichen die Auswahl von Elementen basierend auf ihren Anzeigestatus.

:open: Passt auf ein Element, das entweder offen oder geschlossen sein kann und derzeit offen ist.
:popover-open: Passt auf ein Popover-Element, das sich derzeit im Anzeigestatus 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-in-Bild-Modus befindet.

Eingabepseudoklassen

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 Benutzeroberflächenelement, das aktiviert ist.
:disabled: Repräsentiert ein Benutzeroberflächenelement, 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. Beispielsweise wird es das placeholder-Attribut in den <input>- und <textarea>-Elementen treffen.
:autofill: Passt, wenn ein <input> vom Browser automatisch ausgefüllt wird.
:default: Passt auf ein oder mehrere UI-Elemente, die die Standardoption einer Menge von Elementen 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 zu einem Benutzereingabeelement, das leer ist und einen leeren String oder andere Null-Eingaben enthält.
:valid: Passt auf ein Element mit gültigem Inhalt. Zum Beispiel ein Eingabeelement vom Typ 'email', das eine korrekt formatierte E-Mail-Adresse enthält oder einen leeren Wert, wenn die Kontrolle nicht erforderlich ist.
:invalid: Passt auf ein Element mit ungültigem Inhalt. Zum Beispiel ein Eingabeelement vom Typ 'email' mit einem eingegebenen Namen.
:in-range: Trifft auf Elemente mit Bereichsbeschränkungen zu. Zum Beispiel ein Schieberegler, wenn der ausgewählte Wert im erlaubten Bereich liegt.
:out-of-range: Trifft auf Elemente mit Bereichsbeschränkungen zu. 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 inkorrekter Eingabe, jedoch nur, wenn der Benutzer damit interagiert hat.

Sprachliche Pseudoklassen

Diese Pseudoklassen spiegeln die Dokumentensprache wider und ermöglichen die Auswahl von Elementen basierend auf Sprache oder Schriftlaufrichtung.

:dir(): Die Richtungspseudoklasse wählt ein Element basierend auf seiner Richtung aus, die durch die Dokumentensprache bestimmt wird.
:lang(): Wählt ein Element basierend auf seiner Inhaltsprache aus.

Standort-Pseudoklassen

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

:any-link: Passt auf ein Element, wenn das Element entweder :link oder :visited trifft.
:link: Passt auf Links, die noch nicht besucht wurden.
:visited: Passt auf Links, die besucht wurden.
:local-link: Passt auf Links, deren absolute URL mit der Ziel-URL identisch ist. Zum Beispiel Ankerlinks zur gleichen 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 abgeglichen werden sollen.

Hinweis: Eine :target-within Pseudoklasse, um Elemente zu treffen, die selber 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-Pseudoklassen

Diese Pseudoklassen gelten für Medien, die in einem Zustand sein können, der als abspielend beschrieben werden könnte, wie z. B. 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 momentan eine Wiedergabeposition in der Medienressource sucht.
:buffering: Repräsentiert ein abspielbares Element, das spielt, aber vorübergehend gestoppt wird, weil es die Medienressource herunterlädt.
:stalled: Repräsentiert ein abspielbares Element, das spielt, aber gestoppt ist, weil es die Medienressource nicht herunterladen kann.
:muted: Repräsentiert ein tonerzeugendes Element, das stummgeschaltet ist.
:volume-locked: Repräsentiert ein tonerzeugendes Element, dessen Lautstärke vom Browser gesperrt ist.

Zeitdimensionale Pseudoklassen

Diese Pseudoklassen kommen zur Anwendung, wenn etwas mit Timing angesehen wird, wie beispielsweise ein WebVTT Untertiteltrack.

: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 vorkommt.
:future: Repräsentiert ein Element, das vollständig nach dem :current-Element vorkommt.

Baumstrukturelle Pseudoklassen

Diese Pseudoklassen 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 in der Regel das <html>-Element.
:empty: Repräsentiert ein Element ohne andere Kinder als 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 abgezählt vom Ende der Liste.
: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 Ü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 abgezählt vom Ende der Liste.
: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.

Schattenstrukturelle Pseudoklassen

Diese Pseudoklassen beziehen sich auf das Shadow-DOM.

:host: Passt auf den Shadow-Host des Schattenbaums.
:host(): Passt auf ein Element, das :host trifft und eines der Selektoren in der bereitgestellten Liste trifft.
:host-context(): Wählt Elemente außerhalb des Schattenbaums im Kontext des Shadow-Hosts aus.
:has-slotted: Passt auf Slot-Elemente, denen Inhalt zugewiesen wurde.

Benutzeraktions-Pseudoklassen

Diese Pseudoklassen erfordern einige Interaktionen seitens des Benutzers, um angewandt zu werden, wie z. B. das Schweben eines Mauszeigers über einem Element.

:hover: Passt, wenn ein Benutzer ein Element mit einem Zeigegerät bestimmt, wie z. B. 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 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 Nachkommen hat, auf den :focus zutrifft.
:target-current: Passt auf das ::scroll-marker Pseudoelement einer scroll-marker-group, die gerade zum Scrollen aktiv ist, mit anderen Worten, der aktive Scrollmarker.

Funktionale Pseudoklassen

Diese Pseudoklassen akzeptieren eine Selektorliste oder eine tolerante Selektorliste als Parameter.

:is(): Die matches-any-Pseudoklasse passt auf jedes Element, das einem der in der Liste angegebenen Selektoren entspricht. Die Liste ist tolerant.
:not(): Die Negations- oder matches-none-Pseudoklasse repräsentiert jedes Element, das durch ihr Argument nicht repräsentiert wird.
:where(): Die Spezifitätsanpassungs-Pseudoklasse passt auf jedes Element, das einem der in der Liste angegebenen Selektoren entspricht, ohne jegliche Spezifitätsgewichtung hinzuzufügen. Die Liste ist tolerant.
:has(): Die relationale Pseudoklasse repräsentiert ein Element, wenn einer der relativen Selektoren übereinstimmt, wenn er am angeschlossenen Element verankert ist.

Benutzerdefinierte Status-Pseudoklassen

Diese Pseudoklassen gelten für benutzerdefinierte Elemente.

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

Seiten-Pseudoklassen

Diese Pseudoklassen 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.

Sichtübergangs-Pseudoklassen

Diese Pseudoklassen beziehen sich auf Elemente, die an einem Sichtübergang beteiligt sind.

:active-view-transition: Passt auf das Wurzelelement eines Dokuments, wenn ein Sichtübergang im Gange ist (aktiv) und hört auf zu passen, sobald der Übergang abgeschlossen ist.
:active-view-transition-type(): Passt auf das Wurzelelement eines Dokuments, wenn ein angegebener Sichtübergang im Gange ist (aktiv) und hört auf zu passen, sobald der Übergang abgeschlossen ist.

Syntax

css

selector:pseudo-class {
  property: value;
}

Wie reguläre Klassen, können Sie in einem Selektor so viele Pseudoklassen aneinanderreihen, wie Sie möchten.

Alphabetischer Index

Pseudoklassen, die von einem Satz von CSS-Spezifikationen definiert werden, umfassen Folgendes:

:blank (input) Experimentell
:blank (page)
:buffering

:checked
:current Experimentell

:where()

Nicht-standardisierte Pseudoklassen

Nicht-standardisierte, anbieterpräfixierte Pseudoklassen umfassen:

`-moz-` Präfix

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

Pseudoklassen

-moz- Präfix

Help improve MDN

`-moz-` Präfix