Alle gängigen CSS-Selektoren, nach Familie gruppiert: Basis, Kombinatoren, Pseudoklassen, Pseudoelemente und Attributselektoren. Jede Zeile verbindet den Selektor mit einem Einzeiler-Beispiel.
Ein Selektor wählt die Elemente aus, auf die eine Regel angewendet wird. Die Spezifität entscheidet, welche Regel gewinnt, wenn mehrere zutreffen: inline schlägt id, id schlägt Klasse, Klasse schlägt Typ. Lesen Sie Selektoren von rechts nach links: Der Browser matcht zuerst den rechtesten Teil und folgt dann den Kombinatoren nach oben. Die Familien unten decken fast alles ab, was Sie schreiben werden.
Nachschlagetabelle · 53 Einträge
CSS-SelektorenExplained
53 of 53 rows
Basis
Jedes Element mit diesem Tag.
button { }
Elemente mit dieser Klasse.
.active { }
Das eine Element mit dieser id.
#header { }
Jedes Element.
* { box-sizing: border-box; }
Die Dokumentwurzel; der übliche Ort für globale Custom Properties.
:root { --gap: 1rem; }
Elemente, die von A oder B gematcht werden (Gruppierung).
h1, h2, h3 { }
Kombinatoren
Jedes B, das ein Nachfahre von A ist.
nav a { }
B, das ein direktes Kind von A ist.
ul > li { }
B unmittelbar nach A, gleicher Elternteil.
h1 + p { }
Jedes B, das auf A folgt, gleicher Elternteil.
h1 ~ p { }
Pseudoklassen (Zustand)
Das Element, solange der Zeiger darüber ist.
a:hover { }
Das Element, das den Tastaturfokus hat.
input:focus { }
Ein Element, das das erste Kind seines Elternteils ist.
li:first-child { }
Das n-te Kind; akzeptiert Formeln wie 2n.
tr:nth-child(2n) { }
Elemente, die keinem inneren Selektor entsprechen; akzeptiert seit Selectors 4 eine Liste.
li:not(:first-child, .skip) { }
Eine angehakte Checkbox, ein Radio oder eine Option.
input:checked { }
Ein deaktiviertes Eingabefeld oder ein deaktivierter Button.
button:disabled { }
Ein Elternteil, der eine Übereinstimmung mit dem inneren Selektor enthält.
li:has(ul) { }
Beliebiger Selektor aus der Liste; die Spezifität ist die höchste der Liste.
:is(ol, ul) li { }
Wie :is(), aber mit Spezifität null.
:where(ol, ul) li { }
Fokus, der einen Ring zeigen soll, meist von der Tastatur.
a:focus-visible { }
Ein Element, das selbst den Fokus hat oder einen Nachfahren mit Fokus enthält.
form:focus-within { }
Ein Element, das das letzte Kind seines Elternteils ist.
li:last-child { }
Ein Element ohne Geschwister.
p:only-child { }
Das n-te Geschwister mit demselben Tag; akzeptiert Formeln wie 2n.
p:nth-of-type(2n) { }
Das erste oder letzte Geschwister mit demselben Tag.
p:first-of-type { }
Ein Element ohne Kinder und ohne Text.
td:empty { }
Nicht besuchte und bereits besuchte Links.
a:visited { }
Als erforderlich markierte und als optional belassene Felder.
input:required { }
Felder, deren Wert die Validierungsregeln besteht oder verfehlt.
input:invalid { }
Ein Feld, das der Nutzer nicht bearbeiten kann.
input:read-only { }
Das Element, dessen id zum URL-Fragment passt.
#note:target { }
Die vorgewählte Option oder der Standard-Button einer Gruppe.
input:default { }
Eine per Skript in den unbestimmten Zustand versetzte Checkbox.
input:indeterminate { }
Jedes eingebaute Element oder ein Custom Element, sobald es registriert ist.
my-widget:defined { }
Ein Element in der angegebenen Sprache.
p:lang(fr) { }
Pseudoelemente
Ein generierter Inhaltsknoten vor dem Element.
label::before { content: ""; }
Ein generierter Inhaltsknoten nach dem Element.
code::after { content: ";"; }
Der erste Buchstabe eines Textblocks.
p::first-letter { }
Der Platzhaltertext eines Eingabefelds.
input::placeholder { }
Die erste Zeile eines Textblocks.
p::first-line { }
Der vom Nutzer markierte Text.
::selection { }
Das Aufzählungszeichen oder die Nummer eines Listenelements.
li::marker { }
Die Fläche hinter einem Vollbild-Element oder Dialog.
dialog::backdrop { }
Der Durchsuchen-Button in einem Dateifeld.
input::file-selector-button { }
Ein Shadow-DOM-Part, den der Host freigegeben hat.
my-widget::part(header) { }
Attributselektoren
Elemente, die das Attribut tragen, mit beliebigem Wert.
[required] { }
Das Attribut ist exakt gleich val.
[type="submit"] { }
Das Attribut beginnt mit val.
a[href^="https"] { }
Das Attribut endet mit val.
a[href$=".pdf"] { }
Das Attribut enthält val.
a[href*="login"] { }
Eine leerzeichengetrennte Liste, die val enthält.
[class~="badge"] { }
Der Wert ist gleich val oder beginnt mit val plus Bindestrich.