Pseudo-Klassen
Eine CSS Pseudo-Klasse ist ein Schlüsselwort, das an einen Selektor angehängt wird und es ermöglicht, Elemente basierend auf Informationen auszuwählen, die außerhalb des Dokumentbaums liegen, wie z.B. ein spezifischer Zustand der ausgewählten Elemente. Beispielsweise kann die Pseudo-Klasse :hover verwendet werden, um einen Button zu stylen, wenn ein Zeiger eines Benutzers darüber schwebt.
/* 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 ebenfalls ein Klammerpaar, um die Argumente zu definieren (z.B. :dir()). Das Element, an das eine Pseudo-Klasse angefügt ist, wird als Ankerelement definiert (z.B. button im Fall von button:hover).
Pseudo-Klassen ermöglichen es, einen Stil auf ein Element anzuwenden, nicht nur in Bezug auf den Inhalt des Dokumentbaums, sondern auch in Bezug auf externe Faktoren wie die Historie des Navigators (z.B. :visited), den Status seines Inhalts (wie :checked bei bestimmten Formularelementen) oder die Position der Maus (wie :hover, wobei ermittelt wird, ob sich die Maus über einem Element befindet oder nicht).
Hinweis: Im Gegensatz zu Pseudo-Klassen können Pseudo-Elemente verwendet werden, um einen spezifischen Teil eines Elements zu stylen.
Elementare Pseudo-Klassen
Diese Pseudo-Klassen beziehen sich auf die grundlegende Identität der Elemente.
Pseudo-Klassen des Anzeigezustands
Diese Pseudo-Klassen ermöglichen die Auswahl von Elementen basierend auf ihrem Anzeigezustand.
:open-
Entspricht einem Element, das entweder geöffnet oder geschlossen werden kann und derzeit geöffnet ist.
:popover-open-
Entspricht einem Popover-Element, das sich derzeit im Anzeigestatus befindet.
:modal-
Entspricht einem Element, das sich in einem Zustand befindet, in dem es jede Interaktion mit Elementen außerhalb ausschließt, bis die Interaktion abgewiesen wurde.
:fullscreen-
Entspricht einem Element, das sich derzeit im Vollbildmodus befindet.
:picture-in-picture-
Entspricht einem Element, das sich derzeit im Bild-im-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 Benutzeroberflächenelement, das aktiviert ist.
:disabled-
Repräsentiert ein Benutzeroberflächenelement, das deaktiviert ist.
:read-only-
Repräsentiert ein Element, das vom Benutzer nicht geändert werden kann.
:read-write-
Repräsentiert ein Element, das vom Benutzer bearbeitet werden kann.
:placeholder-shown-
Entspricht einem Eingabeelement, das Platzhaltertext anzeigt. Beispielsweise wird das
placeholder-Attribut in den<input>- und<textarea>-Elementen übereinstimmen. :autofill-
Entspricht, wenn ein
<input>durch den Browser automatisch ausgefüllt wurde. :default-
Entspricht einem oder mehreren UI-Elementen, die unter einem Satz von Elementen die Standardeinstellungen sind.
:checked-
Entspricht, wenn Elemente wie Kontrollkästchen und Optionsfelder aktiviert sind.
:indeterminate-
Entspricht UI-Elementen, wenn sie sich in einem unbestimmten Zustand befinden.
:blank-
Entspricht einem Benutzereingabeelement, das leer ist, entweder eine leere Zeichenkette oder eine andere null-Eingabe enthält.
:valid-
Entspricht einem Element mit gültigem Inhalt. Zum Beispiel ein Eingabeelement mit dem Typ 'email', das eine korrekt formatierte E-Mail-Adresse enthält oder einen leeren Wert, wenn die Steuerung nicht erforderlich ist.
:invalid-
Entspricht einem Element mit ungültigem Inhalt. Zum Beispiel ein Eingabeelement mit Typ 'email' mit einem eingegebenen Namen.
:in-range-
Wird für Elemente mit Bereichsbeschränkungen angewendet. Zum Beispiel eine Schiebereglersteuerung, wenn der ausgewählte Wert im erlaubten Bereich liegt.
:out-of-range-
Wird für Elemente mit Bereichsbeschränkungen angewendet. Zum Beispiel eine Schiebereglersteuerung, wenn der ausgewählte Wert außerhalb des erlaubten Bereichs liegt.
:required-
Entspricht, wenn ein Formularelement erforderlich ist.
:optional-
Entspricht, 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.
Linguistische Pseudo-Klassen
Diese Pseudo-Klassen spiegeln die Dokumentensprache wider und ermöglichen die Auswahl von Elementen basierend auf Sprache oder Schreibrichtung.
Standort-Pseudo-Klassen
Diese Pseudo-Klassen beziehen sich auf Links und auf gezielte Elemente innerhalb des aktuellen Dokuments.
:any-link-
Entspricht einem Element, wenn das Element entweder
:linkoder:visitedentspricht. :link-
Entspricht Links, die noch nicht besucht wurden.
:visited-
Entspricht Links, die besucht wurden.
:local-link-
Entspricht Links, deren absolute URL mit der Ziel-URL identisch ist. Zum Beispiel Ankerlinks zur selben Seite.
:target-
Entspricht dem Element, das das Ziel der Dokument-URL ist.
:scope-
Repräsentiert Elemente, die einen Referenzpunkt für Selektoren darstellen, gegen den sie abgeglichen werden können.
Hinweis:
Eine :target-within Pseudo-Klasse, um Elemente auszuwählen, 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 spielend beschrieben werden könnten, wie ein Video.
:playing-
Repräsentiert ein spielbares Element, das gerade abgespielt wird.
:paused-
Repräsentiert ein spielbares Element, das pausiert.
:seeking-
Repräsentiert ein spielbares Element, das derzeit eine Wiedergabeposition in der Medienressource sucht.
:buffering-
Repräsentiert ein spielbares Element, das spielt, aber vorübergehend angehalten ist, weil es die Medienressource herunterlädt.
:stalled-
Repräsentiert ein spielbares Element, das spielt, aber angehalten ist, weil es die Medienressource nicht herunterladen kann.
:muted-
Repräsentiert ein klangerzeugendes Element, das stummgeschaltet ist.
:volume-locked-
Repräsentiert ein klangerzeugendes Element, dessen Lautstärkepegel vom Browser gesperrt wurde.
Zeitdimensionale Pseudo-Klassen
Diese Pseudo-Klassen gelten, wenn etwas angezeigt wird, das eine zeitliche Dimension hat, wie ein WebVTT Untertiteltrack.
Baumstrukturelle Pseudo-Klassen
Diese Pseudo-Klassen beziehen sich auf den Standort eines Elements innerhalb des Dokumentbaums.
:root-
Repräsentiert ein Element, das die Wurzel des Dokuments ist. Im HTML ist dies normalerweise das
<html>-Element. :empty-
Repräsentiert ein Element ohne Kinder außer Leerzeichenziffern.
:nth-child()-
Verwendet die
An+B-Notation, um Elemente aus einer Liste von Geschwistern auszuwählen. :nth-last-child()-
Verwendet die
An+B-Notation, um Elemente aus einer Liste von Geschwistern auszuwählen, rückwärts von der Liste aus zählend. :first-child-
Entspricht einem Element, das das erste seiner Geschwister ist.
:last-child-
Entspricht einem Element, das das letzte seiner Geschwister ist.
:only-child-
Entspricht einem Element, das keine Geschwister hat. Zum Beispiel ein Listenelement ohne andere Listenelemente in dieser Liste.
:heading()-
Verwendet die
An+B-Notation, um Überschriftenelemente (<h1>-<h6>) auszuwählen. :nth-of-type()-
Verwendet die
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 die
An+B-Notation, um Elemente aus einer Liste von Geschwistern auszuwählen, die einem bestimmten Typ aus einer Liste von Geschwistern rückwärts entsprechen, vom Ende der Liste aus zählend. :first-of-type-
Entspricht einem Element, das das erste seiner Geschwister ist und auch einem bestimmten Typ-Selektor entspricht.
:last-of-type-
Entspricht einem Element, das das letzte seiner Geschwister ist und auch einem bestimmten Typ-Selektor entspricht.
:only-of-type-
Entspricht einem Element, das keine Geschwister des gewählten Typ-Selektors hat.
Schattenstrukturelle Pseudo-Klassen
Diese Pseudo-Klassen beziehen sich auf das Shadow DOM.
:host-
Entspricht dem Shadow-Host des Schattenbaums.
:host()-
Entspricht einem Element, das
:hostentspricht und jedem der in der Liste bereitgestellten Selektoren entspricht. :host-context()-
Wählt Elemente außerhalb des Schattenbaums im Kontext des Schattenhosts aus.
:has-slotted-
Entspricht Slot-Elementen, denen Inhalt zugewiesen wurde.
Benutzeraktions-Pseudo-Klassen
Diese Pseudo-Klassen erfordern eine Interaktion des Benutzers, um sie anzuwenden, wie z.B. das Halten eines Zeigers über einem Element.
:hover-
Entspricht, wenn ein Benutzer ein Element mit einem Zeigegerät bezeichnet, z.B. das Halten des Mauszeigers über das Element.
:active-
Entspricht, wenn ein Element vom Benutzer aktiviert wird. Zum Beispiel, wenn das Element angeklickt wird.
:focus-
Entspricht, wenn ein Element im Fokus steht.
:focus-visible-
Entspricht, wenn ein Element im Fokus steht und der Benutzeragent feststellt, dass das Element sichtbar fokussiert sein sollte.
:focus-within-
Entspricht einem Element, auf das
:focuszutrifft, sowie jedem Element, das einen Nachkommen hat, auf den:focuszutrifft. :target-current-
Entspricht dem
::scroll-markerPseudo-Element einerscroll-marker-group, die derzeit gescrollt wird, in anderen Worten, dem aktiven Scroll-Marker.
Funktionale Pseudo-Klassen
Diese Pseudo-Klassen akzeptieren eine Selektorenliste oder eine fehlertolerante Selektorenliste als Parameter.
:is()-
Die Übereinstimmung-mit-allen-Pseudo-Klasse entspricht jedem Element, das einem der in der Liste bereitgestellten Selektoren entspricht. Die Liste ist fehlertolerant.
:not()-
Die Negations- oder Keine-Übereinstimmung-Pseudo-Klasse repräsentiert jedes Element, das nicht durch sein Argument dargestellt wird.
:where()-
Die Spezifitätsanpassungs-Pseudo-Klasse entspricht jedem Element, das einem der in der Liste bereitgestellten Selektoren ohne Hinzufügung von Spezifitätsgewicht entspricht. Die Liste ist fehlertolerant.
:has()-
Die relationale Pseudo-Klasse repräsentiert ein Element, wenn einer der relativen Selektoren übereinstimmt, wenn gegen das angehängte Element verankert.
Benutzerdefinierte Zustandspseudo-Klassen
Diese Pseudo-Klassen gelten für benutzerdefinierte Elemente.
:state()-
Entspricht 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.
Ansichtsübertragungs-Pseudo-Klassen
Diese Pseudo-Klassen beziehen sich auf Elemente, die an einer Ansichtsübertragung beteiligt sind.
:active-view-transition-
Entspricht dem Wurzelelement eines Dokuments, wenn eine Ansichtsübertragung im Gange ist (aktiv) und das Matchen stoppt, sobald die Übertragung abgeschlossen ist.
:active-view-transition-type()-
Entspricht dem Wurzelelement eines Dokuments, wenn eine angegebene Ansichtsübertragung im Gange ist (aktiv) und das Matchen stoppt, sobald die Übertragung abgeschlossen ist.
Syntax
selector:pseudo-class {
property: value;
}
Wie reguläre Klassen, können Sie so viele Pseudo-Klassen wie gewünscht in einem Selektor aneinander reihen.
Alphabetischer Index
Pseudo-Klassen, die durch eine Reihe von CSS-Spezifikationen definiert sind, umfassen folgendes:
A
B
:blank(Eingabe) Experimentell:blank(Seite):buffering
C
D
E
F
H
I
L
:lang():last-child:last-of-type:left:link:local-linkExperimentell
M
N
O
P
R
S
T
U
V
W
Nicht-standardisierte Pseudo-Klassen
Nicht-standardisierte, anbieterpräfixierte Pseudo-Klassen umfassen:
-moz- Präfix
Spezifikationen
| Specification |
|---|
| HTML # pseudo-classes |
| Selectors Level 4 |
| CSS Scoping Module Level 1 |
| CSS Paged Media Module Level 3 |