CSS-Selektoren

Das CSS-Selektoren-Modul definiert die Muster zur Auswahl von Elementen, auf die dann eine Reihe von CSS-Regeln zusammen mit ihrer Spezifität angewendet wird. Das CSS-Selektoren-Modul stellt uns mehr als 60 Selektoren und fünf Kombinatoren zur Verfügung. Andere Module bieten zusätzliche Pseudo-Klassen-Selektoren und Pseudo-Elemente.

Hinweis: Diese Seite führt in ein CSS-Modul ein. Um eine vollständige Liste aller von CSS-Spezifikationen definierten Selektoren zu finden, siehe die Selektoren Referenzseite.

In CSS sind Selektoren Muster, die verwendet werden, um die Elemente abzugleichen oder auszuwählen, die Sie gestalten möchten. Selektoren werden auch in JavaScript verwendet, um das Auswählen der DOM-Knoten zu ermöglichen, die als NodeList zurückgegeben werden.

Selektoren, ob in CSS oder JavaScript verwendet, ermöglichen das Ansprechen von HTML-Elementen basierend auf ihrem Typ, ihren Attributen, ihrem aktuellen Zustand und sogar ihrer Position im DOM. Kombinatoren ermöglichen eine präzisere Auswahl von Elementen, indem sie die Auswahl basierend auf ihrer Beziehung zu anderen Elementen ermöglichen.

Referenz

Kombinatoren und Trennzeichen

+ (Anschließender Geschwisterkombinator)
> (Kindkombinator)
~ (Nachfolgender Geschwisterkombinator)
" " (Nachkommenkombinator)
| (Namespace-Trennzeichen)
, (Selektorenliste)

Das CSS-Selektoren-Modul führt auch den Spaltenkombinator (||) ein. Derzeit unterstützt kein Browser dieses Feature.

Selektoren

:active
:any-link
:autofill
:buffering
:checked
:default
:defined
:dir()
:disabled
:empty
:enabled
:first-child
:first-of-type
:focus
:focus-visible
:focus-within
:fullscreen
:future
:has()
:hover
:in-range
:indeterminate
:invalid
:is()
:lang()
:last-child
:last-of-type
:link
:matches() (veralteter Alias für den Selektor :is())
:modal
:muted
:not()
:nth-child()
:nth-of-type()
:nth-last-child()
:nth-last-of-type()
:only-child
:only-of-type
:open
:optional
:out-of-range
:past
:paused
:picture-in-picture
:placeholder-shown
:playing
:popover-open
:read-only
:read-write
:required
:root
:scope
:seeking
:stalled
:target
:user-invalid
:user-valid
:valid
:visited
:volume-locked
:where()
:-webkit- Pseudo-Klassen
Attributselektoren
Klassenselektor
ID-Selektoren
Typselektoren
Universalselektoren

Das CSS-Selektoren-Modul führt auch die :blank, :current, und :local-link Pseudo-Klassen ein. Derzeit unterstützt kein Browser diese Features.

Begriffe

Leitfäden

CSS-Selektoren und Kombinatoren: Überblick über die verschiedenen Arten von einfachen Selektoren und verschiedenen Kombinatoren, die in den CSS-Selektoren und CSS-Pseudo-Modulen definiert sind.
Struktur von CSS-Selektoren: Erklärung der Struktur von CSS-Selektoren und der im CSS-Selektoren-Modul eingeführten Fachbegriffe, von "einfacher Selektor" bis "tolerante relative Selektorenliste".
Pseudo-Klassen: Listet die Pseudo-Klassen auf, Selektoren, die die Auswahl von Elementen basierend auf Zustandsinformationen ermöglichen, die nicht im Dokumentbaum enthalten sind, definiert in den verschiedenen CSS-Modulen und HTML.
Die Pseudo-Klasse :target in Selektoren verwenden: Erlernen Sie, wie die :target Pseudo-Klasse verwendet wird, um das Zielelement eines URL-Fragment-Identifiers zu stilisieren.
Datenschutz und der :visited Selektor: Erforscht die Stilbeschränkungen für die :visited Klasse zum Schutz der Privatsphäre der Nutzer.
CSS-Bausteine: CSS-Selektoren: Einführung in grundlegende CSS-Selektoren, einschließlich Tutorials zu Typ-, Klassen- und ID-Selektoren, Attributselektoren, Pseudo-Klassen und Pseudo-Elemente und Kombinatoren.
Lernen: UI-Pseudo-Klassen: Lernen Sie die verschiedenen UI-Pseudo-Klassen kennen, die für die Gestaltung von Formularen in verschiedenen Zuständen zur Verfügung stehen.
Auswahl und Traversierung im DOM-Baum: Die Selektoren-API ermöglicht die Verwendung von Selektoren in JavaScript, um Elementknoten aus dem DOM abzurufen.

Spezifikationen

Specification
Selectors Level 4

Siehe auch

Help improve MDN

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

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