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 z.B. ein bestimmter Zustand des ausgewählten Elements. 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 vom Pseudo-Klassen-Namen (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 Ankerelement definiert (z.B. button im Fall 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 den Verlauf des Browsers (zum Beispiel :visited), den Status seines Inhalts (wie :checked bei bestimmten Formularelementen) oder die Position der Maus (wie :hover, wodurch Sie wissen, ob die Maus über einem Element ist oder nicht).

Hinweis: Im Gegensatz zu Pseudo-Klassen können Pseudo-Elemente verwendet werden, um einen bestimmten Teil eines Elements zu stylen.

Elementar-Pseudo-Klassen

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

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

Pseudo-Klassen für Anzeigestatus von Elementen

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

:open: Passt zu einem Element, das geöffnet oder geschlossen sein kann und momentan geöffnet ist.
:popover-open: Passt zu einem Popover-Element, das sich momentan im angezeigten Zustand befindet.
:modal: Passt zu einem Element, das in einem Zustand ist, in dem es alle Interaktionen mit Elementen außerhalb von ihm ausschließt, bis die Interaktion beendet wurde.
:fullscreen: Passt zu einem Element, das sich momentan im Vollbildmodus befindet.
:picture-in-picture: Passt zu einem Element, das sich momentan im Bild-in-Bild-Modus befindet.
:xr-overlay: Passt zum DOM-Overlay-Element während einer immersiven AR- oder VR-Sitzung.

Eingabe-Pseudo-Klassen

Diese Pseudo-Klassen beziehen sich auf Formularelemente und ermöglichen die Auswahl von Elementen basierend auf HTML-Attributen und dem Status, in dem sich das Feld vor und nach der Interaktion befindet.

:enabled: Repräsentiert ein Benutzeroberflächenelement, das sich in einem aktivierten Zustand befindet.
:disabled: Repräsentiert ein Benutzeroberflächenelement, das sich in einem deaktivierten Zustand befindet.
:read-only: Repräsentiert jedes Element, das vom Benutzer nicht verä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 es das placeholder-Attribut in den <input>- und <textarea>-Elementen ansprechen.
:autofill: Passt, wenn ein <input> vom Browser automatisch ausgefüllt worden ist.
:default: Passt zu einem oder mehreren UI-Elementen, die die Standardeinstellung in einer Gruppe von Elementen darstellen.
:checked: Passt, wenn Elemente wie Kontrollkästchen und Optionsfelder eingeschaltet sind.
:indeterminate: Passt zu UI-Elementen, wenn sie sich in einem unbestimmten Zustand befinden.
:blank: Passt zu einem Benutzereingabeelement, das leer ist und eine leere Zeichenkette oder eine andere Null-Eingabe enthält.
:valid: Passt zu einem Element mit gültigem Inhalt. Zum Beispiel ein Eingabeelement mit dem Typ 'email', das eine gültig geformte E-Mail-Adresse oder einen leeren Wert enthält, wenn die Eingabesteuerung nicht erforderlich ist.
:invalid: Passt zu einem Element mit ungültigem Inhalt. Zum Beispiel ein Eingabeelement mit dem Typ 'email', in dem ein Name eingegeben wurde.
:in-range: Gilt für Elemente mit Bereichsbeschränkungen. Zum Beispiel eine Schieberegler-Steuerung, wenn der ausgewählte Wert im erlaubten Bereich liegt.
:out-of-range: Gilt für Elemente mit Bereichsbeschränkungen. Zum Beispiel eine Schieberegler-Steuerung, 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 mit ihm interagiert hat.
:user-invalid: Repräsentiert ein Element mit falscher Eingabe, aber nur, wenn der Benutzer mit ihm interagiert hat.

Sprachbezogene Pseudo-Klassen

Diese Pseudo-Klassen reflektieren die Dokumentsprache und ermöglichen die Auswahl von Elementen basierend auf Sprache oder Skriptrichtung.

:dir(): Die Richtlinien-Pseudo-Klasse wählt ein Element basierend auf seiner Richtung aus, die durch die Dokumentsprache 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 :link oder :visited entspricht.
: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 übereinstimmt. Zum Beispiel Ankerlinks zur gleichen Seite.
:target: Passt zu dem Element, das das Ziel der Dokument-URL ist.
:scope: Repräsentiert Elemente, die als Referenzpunkt für Selektoren dienen, gegen die abgeglichen wird.

Hinweis: Eine :target-within Pseudo-Klasse, um Elemente zu matchen, die oder die einen Nachfahren haben, welcher 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 in einem Zustand sein können, in dem sie als spielend beschrieben werden, wie 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 derzeit eine Wiedergabeposition in der Medieresource sucht.
:buffering: Repräsentiert ein abspielbares Element, das spielt, aber vorübergehend gestoppt ist, 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 klangerzeugendes Element, das stummgeschaltet ist.
:volume-locked: Repräsentiert ein klangerzeugendes Element, dessen Lautstärkepegel vom Browser gesperrt ist.

Zeitdimensionale Pseudo-Klassen

Diese Pseudo-Klassen gelten, wenn Sie sich etwas ansehen, das Timing 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 vollständig vor dem :current Element auftritt.
:future: Repräsentiert ein Element, das vollständig nach dem :current Element auftritt.

Baumstrukturelle Pseudo-Klassen

Diese Pseudo-Klassen beziehen sich auf die Position eines Elements innerhalb des Dokumentenbaums.

:root: Repräsentiert ein Element, das die Wurzel des Dokuments ist. In HTML ist das normalerweise das <html>-Element.
:empty: Repräsentiert ein Element ohne andere Kinder als Leerzeichen.
: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.
: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 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.
:first-of-type: Passt zu einem Element, das das erste seiner Geschwister ist und auch einem bestimmten Typselektor entspricht.
:last-of-type: Passt zu einem Element, das das letzte seiner Geschwister ist und auch einem bestimmten Typselektor entspricht.
:only-of-type: Passt zu einem Element, das keine Geschwister des gewählten Typselektors hat.

Schattenstrukturelle Pseudo-Klassen

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

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

Benutzeraktions-Pseudo-Klassen

Diese Pseudo-Klassen erfordern eine Interaktion des Benutzers, damit sie angewendet werden, z.B. das Bewegen eines Mauszeigers über ein Element.

:hover: Passt, wenn ein Benutzer eine Mauszeigerkonstruktion über ein Element bewegt.
: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 Benutzer-Agent identifiziert, dass das Element sichtbar fokussiert sein sollte.
:focus-within: Passt zu einem Element, auf das :focus zutrifft, plus jedes Element, das einen Nachfahren hat, auf den :focus zutrifft.
:target-current: Passt zum ::scroll-marker Pseudo-Element einer scroll-marker-group, das gerade gescrollt wird, im anderen Wort, der aktive Scroll-Markenanzeiger.

Grenzbereich für Vorfahrenvergleich im Top-Layer

Beim Setzen von Stilen mit einem :hover, :active oder :focus-within Pseudo-Klassen-Selektor passt der Selektor zu einem verschachtelten Satz von Elementen den DOM-Baum hinauf. Wenn die Hierarchie ein Element im Top-Layer enthält (zum Beispiel ein Popover oder einen anpassbaren <select> Auswahlschalter), endet das Matching an diesem Top-Layer-Element.

Zum Beispiel enthält der folgende Code ein anpassbares <select> Element und ein Popover. Wir haben jedes Element auf der Seite so gestylt, dass es bei Hover einen dicken blauen gestrichelten border erhält.

html

<main>
  <select>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>

  <div>
    <button popovertarget="mypopover">Toggle popover</button>
    <section id="mypopover" popover>
      <p>I am a popover</p>
      <button>I am a popover button</button>
    </section>
  </div>
</main>

* {
  padding: 5px;
}

css

select,
::picker(select) {
  appearance: base-select;
}

:hover {
  border: 5px dashed blue;
}

Beachten Sie, dass, wenn Sie über das <select> Element oder den Popover-Umschalter schweben, alle Vorfahren dieser Elemente die Umrandung erhalten. Sobald jedoch der Auswahlpickel oder das Popover geöffnet ist, wird bei Hover über einen seiner Nachkommen nur bis zum Top-Layer-Element selbst (der Auswahlpickel oder das Popover) eine Umrandung angewendet. Das Matching endet also an diesem Element.

Dieses Verhalten verhindert, dass das Pseudo-Klassen-Matching aus einem Top-Layer-Baustein in die umliegende Seite herausläuft, was andernfalls dazu führen kann, dass eine Benutzeroberfläche beschädigt aussieht.

Funktionale Pseudo-Klassen

Diese Pseudo-Klassen akzeptieren eine Selector-Liste oder fehlertolerante Selector-Liste als Parameter.

:is(): Die Übereinstimmungs-Pseudo-Klasse passt zu jedem Element, das einem der in der Liste bereitgestellten Selektoren entspricht. Die Liste ist fehlertolerant.
:not(): Die Verneinungs- oder Nicht-Übereinstimmungs-Pseudo-Klasse repräsentiert jedes Element, das nicht durch ihr Argument repräsentiert wird.
:where(): Die Spezifizitätsanpassungs-Pseudo-Klasse passt zu jedem Element, das einem der in der Liste bereitgestellten Selektoren entspricht, ohne Spezifizitätsgewicht hinzuzufügen. Die Liste ist fehlertolerant.
:has(): Die Beziehungspseudo-Klasse repräsentiert ein Element, wenn einer der relativen Selektoren übereinstimmt, wenn gegen das angehängte Element verankert wird.

Benutzerdefinierte Status-Pseudo-Klassen

Diese Pseudo-Klassen gelten für benutzerdefinierte Elemente.

:state(): Passt zu benutzerdefinierten Elementen, die den angegebenen benutzerdefinierten Status haben.

Seitenbezogene Pseudo-Klassen

Diese Pseudo-Klassen 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.

View-Übergangs-Pseudo-Klassen

Diese Pseudo-Klassen beziehen sich auf Elemente, die an einem View-Übergang beteiligt sind.

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

Syntax

css

selector:pseudo-class {
  property: value;
}

Wie reguläre Klassen können Sie in einem Selektor so viele Pseudo-Klassen verketten, wie Sie möchten.

Alphabetischer Index

Durch eine Reihe von CSS-Spezifikationen definierte Pseudo-Klassen umfassen Folgendes:

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

:where()

:xr-overlay

Nicht-standardisierte Pseudo-Klassen

Nicht-standardisierte, mit einem Präfix versehene 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