Pseudoklassen

Eine CSS Pseudoklasse ist ein Schlüsselwort, das einem Selektor hinzugefügt wird, um einen bestimmten Zustand der ausgewählten Elemente zu stylen. Zum Beispiel kann die Pseudoklasse :hover verwendet werden, um einen Button auszuwählen, wenn der Zeiger eines Benutzers über den Button schwebt, und dieser ausgewählte Button kann dann gestylt werden.

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 das eine Pseudoklasse gebunden ist, wird als Anker-Element definiert (z. B. button im Fall von button:hover).

Pseudoklassen ermöglichen es Ihnen, einem Element einen Stil nicht nur in Bezug auf den Inhalt des Dokumentenbaums, sondern auch in Bezug auf externe Faktoren wie den Verlauf des Navigators (z. B. :visited), den Status seines Inhalts (wie :checked bei bestimmten Formularelementen) oder die Position der Maus (wie :hover, das Ihnen mitteilt, ob die Maus über einem Element ist oder nicht).

Hinweis: Im Gegensatz zu Pseudoklassen können Pseudoelemente verwendet werden, um einen bestimmten Teil eines Elements zu stylen.

Elementare Pseudoklassen

Diese Pseudoklassen beziehen sich auf die Kernidentität von Elementen.

:defined: Wählt jedes definierte Element aus.
:heading: Wählt jedes Überschriftselement (<h1>-<h6>) aus.

Anzeigezustand-Pseudoklassen der Elemente

Diese Pseudoklassen ermöglichen die Auswahl von Elementen basierend auf ihren Anzeigezuständen.

:open: Wählt ein Element aus, das entweder geöffnet oder geschlossen sein kann und das derzeit geöffnet ist.
:popover-open: Wählt ein Popover-Element aus, das sich derzeit im Anzeigestatus befindet.
:modal: Wählt ein Element aus, das sich in einem Zustand befindet, in dem es alle Interaktionen mit außerhalb liegenden Elementen ausschließt, bis die Interaktion verworfen wurde.
:fullscreen: Wählt ein Element aus, das sich derzeit im Vollbildmodus befindet.
:picture-in-picture: Wählt ein Element aus, das sich derzeit im Bild-im-Bild-Modus befindet.

Eingabe-Pseudoklassen

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 UI-Element, das aktiviert ist.
:disabled: Repräsentiert ein UI-Element, 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 bearbeitbar ist.
:placeholder-shown: Wählt ein Eingabeelement aus, das Platzhaltertext anzeigt. Zum Beispiel wird das placeholder Attribut in den <input> und <textarea> Elementen entsprechend ausgewählt.
:autofill: Trifft zu, wenn ein <input> vom Browser automatisch ausgefüllt wurde.
:default: Wählt ein oder mehrere UI-Elemente aus, die standardmäßig unter einer Menge von Elementen stehen.
:checked: Trifft zu, wenn Elemente wie Kontrollkästchen und Optionsfelder aktiviert sind.
:indeterminate: Beschreibt Elemente, die sich in einem unbestimmten Zustand befinden.
:blank: Wählt ein Benutzereingabeelement aus, das leer ist, einen leeren String oder andere null-Eingaben enthält.
:valid: Wählt ein Element mit gültigen Inhalten aus. 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: Wählt ein Element mit ungültigen Inhalten aus. 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 zulässigen Bereich 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: Trifft zu, wenn ein Formularelement erforderlich ist.
:optional: Trifft zu, 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 Sprache des Dokuments wider und ermöglichen die Auswahl von Elementen basierend auf der Sprache oder Ausrichtungsrichtung des Textes.

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

Lokations-Pseudoklassen

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

:any-link: Wählt ein Element aus, wenn das Element entweder :link oder :visited entsprechen würde.
:link: Wählt Links aus, die noch nicht besucht wurden.
:visited: Wählt Links aus, die besucht wurden.
:local-link: Wählt Links aus, deren absolute URL mit der Ziel-URL identisch ist. Zum Beispiel Ankerlinks zur gleichen Seite.
:target: Wählt das Element aus, das das Ziel der Dokument-URL ist.
:target-within: Wählt Elemente aus, die das Ziel der Dokument-URL sind, aber auch Elemente, die einen Nachfahren haben, der das Ziel der Dokument-URL ist.
:scope: Repräsentiert Elemente, die einen Bezugspunkt für Selektoren darstellen, gegen die geprüft wird.

Ressourcenstatus-Pseudoklassen

Diese Pseudoklassen gelten für Medien, die sich in einem Zustand befinden können, der als abspielbar beschrieben würde, wie 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 Abspielposition in der Medienressource sucht.
:buffering: Repräsentiert ein abspielbares Element, das spielt, aber vorübergehend angehalten ist, weil es die Medienressource herunterlädt.
:stalled: Repräsentiert ein abspielbares Element, das spielt, aber angehalten ist, weil es die Medienressource nicht herunterladen kann.
:muted: Repräsentiert ein tonproduzierendes Element, das stummgeschaltet ist.
:volume-locked: Repräsentiert ein tonproduzierendes Element, bei dem der Lautstärkepegel durch den Browser gesperrt ist.

Zeitdimensionale Pseudoklassen

Diese Pseudoklassen gelten, wenn etwas angezeigt wird, das Zeitbegrenzungen hat, wie eine WebVTT Untertitelspur.

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

Baumstruktur-Pseudoklassen

Diese Pseudoklassen beziehen sich auf die Position 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-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 gezählt.
:first-child: Wählt ein Element aus, das das erste seiner Geschwister ist.
:last-child: Wählt ein Element aus, das das letzte seiner Geschwister ist.
:only-child: Wählt ein Element aus, 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 zu wä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 zu wählen, die einem bestimmten Typ aus einer Liste von Geschwisterelementen entsprechen, rückwärts vom Ende der Liste gezählt.
:first-of-type: Wählt ein Element aus, das das erste seiner Geschwister ist und auch einem bestimmten Selektor entspricht.
:last-of-type: Wählt ein Element aus, das das letzte seiner Geschwister ist und auch einem bestimmten Selektor entspricht.
:only-of-type: Wählt ein Element aus, das keine Geschwister des ausgewählten Typselektors hat.

Schattenstruktur-Pseudoklassen

Diese Pseudoklassen beziehen sich auf das Shadow DOM.

:host: Wählt den Schattenbaum-Schattenhost aus.
:host(): Wählt ein Element aus, das :host entspricht und alle in der Liste angegebenen Selektoren entspricht.
:host-context(): Wählt Elemente außerhalb des Schattenbaums im Kontext des Schattenhosts aus.
:has-slotted: Wählt Slot-Elemente aus, denen Inhalt zugewiesen wurde.

Benutzeraktions-Pseudoklassen

Diese Pseudoklassen erfordern eine Interaktion des Benutzers, damit sie angewendet werden, wie das Halten eines Mauszeigers über einem Element.

:hover: Trifft zu, wenn ein Benutzer ein Element mit einem Zeigegerät bestimmt, wie das Halten des Mauszeigers über dem Element.
:active: Trifft zu, wenn ein Element vom Benutzer aktiviert wird. Zum Beispiel, wenn auf das Element geklickt wird.
:focus: Trifft zu, wenn ein Element den Fokus hat.
:focus-visible: Trifft zu, wenn ein Element den Fokus hat und der Benutzeragent feststellt, dass das Element sichtbar fokussiert sein sollte.
:focus-within: Wählt ein Element aus, auf das :focus zutrifft, sowie jedes Element, das einen Nachfahren hat, auf das :focus zutrifft.
:target-current: Wählt das ::scroll-marker Pseudoelement einer scroll-marker-group aus, auf das derzeit gescrollt wird, also den aktiven Scroll-Marker.

Funktionale Pseudoklassen

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

:is(): Die Welche-passt-Pseudoklasse trifft auf jedes Element zu, das einem der Selektoren in der angegebenen Liste entspricht. Die Liste ist nachsichtig.
:not(): Die Negations- oder Keine-passt-Pseudoklasse entspricht jedem Element, das nicht durch ihr Argument repräsentiert wird.
:where(): Die Spezifität-Anpassungs-Pseudoklasse trifft auf jedes Element zu, das einem der Selektoren in der angegebenen Liste ohne Spezifitätsgewicht entspricht. Die Liste ist nachsichtig.
:has(): Die Relationale Pseudoklasse repräsentiert ein Element, wenn einer der relativen Selektoren übereinstimmt, wenn an das angehängte Element angebunden.

Benutzerdefinierte Zustands-Pseudoklassen

Diese Pseudoklassen gelten für benutzerdefinierte Elemente.

:state(): Wählt benutzerdefinierte Elemente aus, die den angegebenen benutzerdefinierten Zustand 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.

Ansichtstransition-Pseudoklassen

Diese Pseudoklassen beziehen sich auf Elemente, die an einer Ansichtstransition beteiligt sind.

:active-view-transition: Wählt das Stamm-Element eines Dokuments aus, wenn eine Ansichtstransition in Bearbeitung ist (aktiv) und hört auf, übereinzustimmen, sobald die Transition abgeschlossen ist.
:active-view-transition-type(): Wählt das Stamm-Element eines Dokuments aus, wenn eine bestimmte Ansichtstransition in Bearbeitung ist (aktiv) und hört auf, übereinzustimmen, sobald die Transition abgeschlossen ist.

Syntax

css

selector:pseudo-class {
  property: value;
}

Wie reguläre Klassen können Sie beliebig viele Pseudoklassen in einem Selektor miteinander verketten.

Alphabetisches Verzeichnis

Pseudoklassen, die durch eine Reihe von CSS-Spezifikationen definiert sind, umfassen Folgendes:

: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

Pseudoelemente

Help improve MDN

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

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