Gib einen beliebigen CSS-Selektor ein und sieh, welche Elemente er auf einer Beispielseite trifft, samt seiner Spezifität. Mit allen Selektorgruppen, einem Rechner für nth-child-Formeln, Rezepten für ::before und ::after sowie :has().
Selektoren sagen CSS, auf welche Elemente eine Regel angewendet wird. Die wichtigsten sind Typ (p), Klasse (.card), ID (#main), Attribut ([type=email]), Kombinatoren (Nachfahre mit Leerzeichen, Kind >, Geschwister + und ~), Pseudoklassen wie :hover und :nth-child(2n) sowie Pseudo-Elemente wie ::before. Gib unten einen Selektor ein, um zu sehen, was er trifft.
Die Selektoren hinter den meisten Stylesheets
Selektor
Trifft
Spezifität
Jedes p-Element
.card
Elemente mit der Klasse card
Das Element mit der id main
nav a
a irgendwo innerhalb von nav
ul > li
li, die direkte Kinder von ul sind
a:hover
Ein Link unter dem Mauszeiger
Eine Selektortabelle zu lesen bringt dich nur bis zu einem gewissen Punkt. Der Tester unten lässt deinen Selektor durch die eigene Engine des Browsers gegen eine kleine Beispielseite laufen, hebt jedes getroffene Element hervor, erklärt ungültige Eingaben und berechnet die Spezifität. Der Rechner darunter beantwortet die ewige Frage, welche Elemente 3n+1 tatsächlich auswählt.
Gib einen Selektor in den Tester ein oder klicke auf eines der Beispiele, um es zu laden.
Getroffene Elemente auf der Beispielseite leuchten auf, und die Anzahl aktualisiert sich beim Tippen.
Lies den Spezifitätswert als drei Zahlen: IDs, dann Klassen und Ähnliches, dann Elementtypen.
Teste mit dem nth-child-Rechner jede An+B-Formel an einer Liste mit bis zu 30 Elementen.
Style mit Klassen statt mit IDs. Eine Klasse hält die Spezifität niedrig, sodass spätere Regeln und Utility-Klassen sie noch überschreiben können.
Verwende für Fokusringe :focus-visible statt :focus. Es zeigt den Ring für Tastaturnutzer, ohne ihn bei jedem Mausklick aufblitzen zu lassen.
::before und ::after brauchen eine content-Eigenschaft, selbst einen leeren String, sonst werden sie gar nicht erzeugt.
Pack lange Selektorlisten in :is(), um sie zu verkürzen, oder in :where(), wenn sie keine Spezifität tragen sollen.
Häufige Fragen
Was ist der Unterschied zwischen nth-child und nth-of-type?
:nth-child(2) zählt jedes Geschwisterelement und prüft dann, ob das zweite auch auf den Rest des Selektors passt. :nth-of-type(2) zählt nur Geschwister mit demselben Tag. p:nth-child(2) trifft also nichts, wenn das zweite Kind ein h2 ist, während p:nth-of-type(2) trotzdem den zweiten Absatz findet.
Was ist der Unterschied zwischen ::before und :before?
Es ist dasselbe Pseudo-Element. Der doppelte Doppelpunkt wurde eingeführt, um Pseudo-Elemente von Pseudoklassen zu unterscheiden, und Browser akzeptieren den einfachen Doppelpunkt aus Gründen der Abwärtskompatibilität weiterhin für die vier älteren (before, after, first-line, first-letter). Schreib in neuem Code den doppelten Doppelpunkt.
Was macht :has()?
:has() trifft ein Element anhand dessen, was es enthält oder was darauf folgt, zum Beispiel gestaltet .card:has(img) Karten mit einem Bild, und label:has(+ input:invalid) gestaltet ein Label vor einem ungültigen Feld. Es wird in allen aktuellen großen Browsern unterstützt, wobei Firefox es als letzter Ende 2023 ergänzt hat.
Wie wird die Spezifität berechnet?
Zähle drei Dinge: ID-Selektoren; Klassen, Attributselektoren und Pseudoklassen; dann Typselektoren und Pseudo-Elemente. Verglichen wird von links, daher schlägt eine ID jede Anzahl von Klassen. :where() fügt nichts hinzu, während :is(), :not() und :has() den Wert ihres spezifischsten Arguments übernehmen. Inline-Styles und !important stehen über all dem.
Warum wird mein :hover-Stil auf Handys nicht angezeigt?
Touchscreens haben keinen Hover-Zustand, daher überspringen Browser ihn oder wenden ihn nach einem Tippen kurz an. Pack reine Hover-Stile in @media (hover: hover) und stell sicher, dass alles, was beim Hovern erscheint, auch per Tippen und Tastatur erreichbar ist.
Wie der Browser einen Selektor liest
Browser gleichen Selektoren von rechts nach links ab. Bei nav ul li a beginnt die Engine mit jedem Link auf der Seite und geht dann nach oben, um nach einem li, einem ul und einem nav zu suchen. Deshalb ist der rechte Teil, der Key Selector, für die Geschwindigkeit am wichtigsten, auch wenn die Selektorgeschwindigkeit auf normalen Seiten selten ein echtes Problem ist.
Ein Komma erzeugt eine Selektorliste, also einfach mehrere Selektoren, die sich eine Regel teilen. Ist einer davon ungültig, wird die gesamte Regel verworfen, außer innerhalb von :is() und :where(), die ungültige Einträge verzeihen.
Pseudoklassen im Vergleich zu Pseudo-Elementen
Eine Pseudoklasse, geschrieben mit einem Doppelpunkt, wählt ein vorhandenes Element in einem bestimmten Zustand oder an einer bestimmten Position aus: :hover, :checked, :first-child, :empty. Ein Pseudo-Element, geschrieben mit zwei Doppelpunkten, erzeugt oder adressiert einen Teil, der im HTML kein eigenes Element ist: ::before, ::placeholder, ::selection, ::marker.
Pro zusammengesetztem Selektor ist nur ein Pseudo-Element erlaubt, und es muss am Ende stehen. Über ::before und ::after hinzugefügter Inhalt wird von Screenreadern meist vorgelesen, kann aber nicht markiert oder kopiert werden, also gehören wichtige Informationen nicht dorthin.
Die Spezifität im Griff behalten
Die meisten Spezifitätskämpfe beginnen, wenn eine ID oder eine lange Kette verschachtelter Selektoren gegen eine spätere, einfachere Regel gewinnt. Flache Klassennamen, höchstens ein oder zwei Ebenen tief, halten jede Regel leicht überschreibbar.
Cascade Layers (@layer) bieten ein weiteres Werkzeug: Regeln in einer späteren Ebene schlagen Regeln in einer früheren, unabhängig von der Spezifität. Resets und Styles von Drittanbietern können in einer niedrigen Ebene liegen, sodass deine eigenen Klassen immer gewinnen.
Grundlegende Selektoren und Attributselektoren
Einfache Selektoren
Selektor
Beispiel
Trifft
Jedes Element
Typ
Alle button-Elemente
Klasse
.price
class enthält price
ID
id ist checkout
Attribut vorhanden
[disabled]
Hat das Attribut überhaupt
Exakter Wert
[type="email"]
Wert ist genau email
Beginnt mit
[href^="https"]
Wert beginnt mit https
Endet mit
[href$=".pdf"]
Wert endet mit .pdf
Enthält
[class*="btn"]
Wert enthält btn an beliebiger Stelle
Wort in Liste
[rel~="noopener"]
Durch Leerzeichen getrennte Liste enthält das Wort
Sprachpräfix
[lang|="en"]
en oder en- gefolgt von beliebigen Zeichen
Ohne Groß- und Kleinschreibung
[href$=".PDF" i]
Trifft .pdf, .PDF und so weiter
Kombinatoren
Beziehungen zwischen Elementen
Kombinator
Beispiel
Trifft
Nachfahre (Leerzeichen)
nav a
a in beliebiger Tiefe innerhalb von nav
Kind >
ul > li
li direkt innerhalb von ul
Nächstes Geschwister +
Das p direkt nach einem h2
Spätere Geschwister ~
Jedes p nach einem h2 mit demselben Elternelement
Selektorliste ,
Eines von beiden
Pseudoklassen
Zustand, Struktur und Logik
Pseudoklasse
Trifft
:hover
Unter einem Mauszeiger
:focus
Hat Tastatur- oder programmatischen Fokus
:focus-visible
Fokussiert, und der Browser entscheidet, dass ein Ring angezeigt werden soll
:focus-within
Es selbst oder ein Nachfahre hat den Fokus
:active
Wird gerade gedrückt
:visited
Ein bereits besuchter Link (aus Datenschutzgründen eingeschränkt gestaltbar)
:checked / :disabled / :required
Formularelemente in diesem Zustand
:valid / :invalid / :user-invalid
Zustände der Formularvalidierung; user-invalid wartet auf eine Interaktion
:placeholder-shown
Ein Eingabefeld, das gerade seinen Platzhalter zeigt
:first-child / :last-child / :only-child
Position unter den Geschwistern
:nth-child(An+B) / :nth-last-child()
Position per Formel, alle Geschwister werden gezählt
:nth-of-type() / :first-of-type
Position, nur dasselbe Tag wird gezählt
:empty
Keine Kinder und kein Text
:not(x)
Trifft nicht auf x zu
:is(x, y) / :where(x, y)
Trifft auf jeden Eintrag der Liste zu; where hat keine Spezifität
:has(x)
Enthält etwas, das auf x passt, oder wird davon gefolgt
:root
Das html-Element
:target
Das Element, dessen id im URL-Hash steht
Pseudo-Elemente und Rezepte für ::before / ::after
Teile eines Elements
Pseudo-Element
Zielt auf
::before / ::after
Erzeugter Inhalt vor oder nach dem Inhalt des Elements
::first-letter / ::first-line
Erster Buchstabe oder erste gerenderte Zeile eines Blocks
::placeholder
Platzhaltertext in einem Eingabefeld
::selection
Text, den der Nutzer markiert hat
::marker
Der Aufzählungspunkt oder die Nummer eines Listeneintrags
::file-selector-button
Der Button eines Dateieingabefelds
::backdrop
Die Ebene hinter einem modalen dialog oder einem Vollbild-Element
Pflichtfeld-Stern, Icon für externe Links und ein Anführungszeichen
Jede Dekoration lebt im CSS, sodass das HTML sauber bleibt. content ist für beide Pseudo-Elemente erforderlich.
:hover, :focus-visible und :has() zusammen
Spring mit Tab in das Feld, um den Ring zu sehen. Die Karte wird nur rot, solange sie eine ungültige E-Mail-Adresse enthält.
Start
Partnerseite
Speisekarte
Saisonale Gerichte, jede Woche neu.
Frag nach Allergenen.
Suppe
Salat
Risotto
Tarte
Kaffee
Name
Notiz
Selektor-Tester
Selektor
Beispielselektoren
Das ist in diesem Browser kein gültiger Selektor.
{n} Element getroffen
{n} Elemente getroffen
Die Spezifität liest sich als IDs, Klassen, Typen. Das dritte Element, Risotto, hat die Klasse featured; der erste Absatz hat die id intro.
nth-child-Rechner
Formel innerhalb von :nth-child( )
Anzahl der Elemente: {n}
Formelbeispiele
Verwende eine Form wie 2n+1, -n+3, odd, even oder eine einzelne Zahl.