CSS-Selektoren: Übersicht mit Beispielen und Test

Q: Was ist der Unterschied zwischen nth-child und nth-of-type?

:nth-child(2) zählt alle Geschwister, egal welchen Typs, und trifft nur, wenn das zweite Kind auch zum Selektor passt. :nth-of-type(2) zählt nur Geschwister desselben Elementtyps, also etwa das zweite p.

Q: Was ist der Unterschied zwischen Pseudoklasse und Pseudo-Element?

Eine Pseudoklasse wie :hover beschreibt einen Zustand eines vorhandenen Elements und hat einen Doppelpunkt. Ein Pseudo-Element wie ::before steht für einen Teil oder einen erzeugten Inhalt und hat zwei Doppelpunkte.

Q: Was ist der Unterschied zwischen :is() und :where()?

Beide fassen Selektoren zusammen. :is() übernimmt die Spezifität seines spezifischsten Arguments, :where() hat immer Spezifität 0. Für Grundstile, die leicht überschrieben werden sollen, eignet sich :where().

Q: Kann ich mit CSS ein Elternelement auswählen?

Ja, mit :has(). li:has(> a.aktiv) trifft Listeneinträge, die einen aktiven Link als direktes Kind enthalten. Alle aktuellen großen Browser unterstützen das.

CSS-Selektoren mit Beispielen: Kombinatoren, Attribute, Pseudoklassen wie :has() und nth-child sowie Pseudo-Elemente. Suchen, kopieren und Selektoren direkt an eigenem HTML testen.

Selektor testen

CSS-Selektor

Beispiele

HTML zum Testen

Suchen

Gruppe

81 Einträge

Grundlagen

*Universalselektor: jedes Element

pTypselektor: alle <p>-Elemente

.hinweisKlassenselektor: alle Elemente mit class="hinweis"

#kopfID-Selektor: das Element mit id="kopf"; hohe Spezifität

p.hinweisElement und Klasse zugleich: <p class="hinweis">

.a.bBeide Klassen am selben Element (ohne Leerzeichen)

h1, h2, h3Selektorliste: Regel gilt für alle genannten Selektoren

Kombinatoren

nav aNachfahre: jedes a irgendwo innerhalb von nav

ul > liKind: nur direkte li-Kinder von ul

h2 + pDirekter Nachbar: das erste p unmittelbar nach einem h2

h2 ~ pAlle folgenden Geschwister: jedes p nach einem h2 mit demselben Elternelement

Attributselektoren

[disabled]Attributselektor: Element hat das Attribut, egal mit welchem Wert

[type="email"]Attribut hat genau diesen Wert

[class~="karte"]Wert ist eine durch Leerzeichen getrennte Liste und enthält das Wort

[lang|="de"]Wert ist genau de oder beginnt mit de-, etwa de-AT

a[href^="https://"]Wert beginnt mit dem Text

a[href$=".pdf"]Wert endet mit dem Text

[href*="beispiel"]Wert enthält den Text an beliebiger Stelle

[href$=".PDF" i]Vergleich ohne Groß- und Kleinschreibung (Flag i)

[data-status="offen"]Eigene data--Attribute als Zustand im CSS nutzen

Struktur-Pseudoklassen

:rootWurzelelement des Dokuments, in HTML <html>; üblicher Ort für CSS-Variablen

:first-childElement ist das erste Kind seines Elternelements

:last-childElement ist das letzte Kind

:only-childElement ist das einzige Kind

li:nth-child(2)Zweites Kind, gezählt ab 1

tr:nth-child(odd)Ungerade Kinder (1, 3, 5 …); even für gerade, etwa für Tabellenstreifen

li:nth-child(3n+1)Jedes dritte Element ab dem ersten: 1, 4, 7 …

li:nth-child(-n+3)Die ersten drei Elemente

:nth-last-child(2)Zweitletztes Kind

:nth-child(2 of .aktiv)Zweites Element unter denen mit Klasse aktiv (neuere Browser)

p:first-of-typeErstes p unter seinen Geschwistern, egal welche anderen Elemente davor stehen

p:last-of-typeLetztes Element dieses Typs

img:only-of-typeEinziges Element dieses Typs im Elternelement

li:nth-of-type(2n)Jedes zweite li, nur Elemente gleichen Typs werden gezählt

:emptyElement ohne Kinder und ohne Text (auch ohne Leerzeichen)

Benutzeraktion und Links

:hoverMaus steht über dem Element

:activeElement wird gerade geklickt oder gedrückt

:focusElement hat den Fokus

:focus-visibleFokus, den der Browser sichtbar machen sollte, etwa bei Tastaturbedienung

:focus-withinElement selbst oder ein Nachfahre hat den Fokus

:linkNoch nicht besuchter Link

:visitedBesuchter Link; aus Datenschutzgründen sind nur Farben änderbar

:any-linkJeder Link mit href, besucht oder nicht

:targetElement, dessen ID im Anker der URL steht, etwa #faq

Formular-Pseudoklassen

:checkedAngehakte Checkbox, gewählter Radiobutton oder gewählte Option

:disabledDeaktiviertes Formularelement

:enabledAktives Formularelement

:requiredPflichtfeld mit Attribut required

:optionalFeld ohne required

:validEingabe ist gültig

:invalidEingabe ist ungültig, greift schon vor der ersten Eingabe

:user-invalidUngültig erst, nachdem der Nutzer das Feld bearbeitet hat (neuere Browser)

:placeholder-shownFeld zeigt gerade den Platzhaltertext, ist also leer

:read-onlyNicht bearbeitbares Element

:indeterminateCheckbox im Zwischenzustand oder Fortschrittsbalken ohne Wert

:in-rangeZahl liegt innerhalb von min und max (:out-of-range außerhalb)

:defaultStandardoption, etwa der Standard-Absendeknopf eines Formulars

:autofillFeld wurde vom Browser automatisch ausgefüllt

Logische Pseudoklassen

:not(.aktiv)Alle Elemente ohne die Klasse; auch mit Selektorliste :not(.a, .b)

:is(h1, h2, h3) aFasst Selektoren zusammen; Spezifität des spezifischsten Arguments

:where(nav, footer) aWie :is(), aber mit Spezifität 0, leicht überschreibbar

article:has(img):has(): Elternelement, das ein img enthält

h2:has(+ p)h2, auf das direkt ein p folgt

form:has(:user-invalid)Formular, das mindestens ein ungültiges, bearbeitetes Feld enthält

:lang(de)Elemente in deutscher Sprache laut lang-Attribut

:dir(rtl)Elemente mit Schreibrichtung rechts nach links

Pseudo-Elemente

::beforeErzeugt einen Inhalt vor dem Element; braucht die Eigenschaft content

::afterErzeugt einen Inhalt nach dem Element

::first-lineErste Textzeile eines Blocks

::first-letterErster Buchstabe, etwa für Initialen

::placeholderPlatzhaltertext in Eingabefeldern

::selectionVom Nutzer markierter Text

::markerAufzählungszeichen oder Nummer eines Listeneintrags

::backdropFläche hinter einem modalen <dialog> oder Vollbild-Element

::file-selector-buttonKnopf eines <input type="file">

Weitere

:fullscreenElement im Vollbildmodus

:modalElement, das alles andere blockiert, etwa ein per showModal() geöffneter Dialog

:popover-openGeöffnetes Popover-Element

:definedElement ist definiert, auch eigene Custom Elements nach customElements.define()

:hostIm Shadow DOM: das Host-Element der Komponente

::part(knopf)Von außen gestaltbarer Teil einer Web-Komponente (part="knopf")

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

CSS-Selektoren im Überblick

Diese CSS Selektoren Übersicht enthält 81 Selektoren mit kurzer Erklärung: Grundlagen, Kombinatoren, jeden Attributselektor, Pseudoklassen für Struktur, Formulare und Logik sowie Pseudo-Elemente. Mit dem Prüffeld oben testen Sie einen Selektor direkt an eigenem HTML: Das Werkzeug wendet ihn mit querySelectorAll() auf ein vom Browser geparstes Dokument an und listet die Treffer. Skripte im HTML werden dabei nicht ausgeführt.

CSS-Selektoren bestimmen, für welche Elemente eine Regel gilt. Einfache Selektoren lassen sich kombinieren: nav a trifft Links in der Navigation, ul > li nur direkte Kinder. Pseudoklassen beschreiben Zustände oder Positionen, etwa :hover, :checked oder :nth-child(odd) für jede zweite Tabellenzeile. Mit :has() lässt sich inzwischen auch ein Elternelement anhand seines Inhalts auswählen, was früher nur mit JavaScript ging.

Treffen mehrere Regeln auf dasselbe Element zu, entscheidet die Spezifität, die Sie mit dem Spezifität-Rechner ausrechnen können. Dieselben Selektoren nutzen auch document.querySelector(), Testwerkzeuge wie Playwright und viele Scraper. Grenze des Prüffelds: Zustände wie :hover oder :focus treten in einem nicht angezeigten Dokument nie ein und liefern deshalb keine Treffer.

Anleitung: CSS-Selektoren in 4 Schritten

Suchen Sie in der Liste nach einem Begriff wie „Formular“, „nth“ oder „Attribut“ oder wählen Sie eine Gruppe.
Kopieren Sie den passenden Selektor mit „Kopieren“.
Fügen Sie im Bereich „Selektor testen“ ein HTML-Beispiel ein und tragen Sie Ihren Selektor ein.
Prüfen Sie Anzahl und Liste der Treffer; ungültige Selektoren werden mit Fehlermeldung angezeigt.

Typische Anwendungsfälle

Ein Stylesheet schreiben, ohne für jedes Element eine eigene Klasse zu vergeben.
Selektoren für document.querySelectorAll(), Playwright, Cypress oder Scraper testen.
Formularfelder je nach Zustand gestalten, etwa mit :user-invalid oder :placeholder-shown.
Elternelemente mit :has() gestalten, zum Beispiel Karten, die ein Bild enthalten.

Fragen

Häufige Fragen

Was ist der Unterschied zwischen nth-child und nth-of-type?

:nth-child(2) zählt alle Geschwister, egal welchen Typs, und trifft nur, wenn das zweite Kind auch zum Selektor passt. :nth-of-type(2) zählt nur Geschwister desselben Elementtyps, also etwa das zweite p.

Was ist der Unterschied zwischen Pseudoklasse und Pseudo-Element?

Eine Pseudoklasse wie :hover beschreibt einen Zustand eines vorhandenen Elements und hat einen Doppelpunkt. Ein Pseudo-Element wie ::before steht für einen Teil oder einen erzeugten Inhalt und hat zwei Doppelpunkte.

Was ist der Unterschied zwischen :is() und :where()?

Beide fassen Selektoren zusammen. :is() übernimmt die Spezifität seines spezifischsten Arguments, :where() hat immer Spezifität 0. Für Grundstile, die leicht überschrieben werden sollen, eignet sich :where().

Kann ich mit CSS ein Elternelement auswählen?

Ja, mit :has(). li:has(> a.aktiv) trifft Listeneinträge, die einen aktiven Link als direktes Kind enthalten. Alle aktuellen großen Browser unterstützen das.

Funktioniert :has() in allen Browsern?

In den aktuellen Versionen von Chrome, Edge, Safari und Firefox ja; Firefox unterstützt :has() seit Version 121 (Dezember 2023). Für sehr alte Browser lohnt eine Regel, die auch ohne :has() brauchbar aussieht.

Warum greift mein Selektor nicht?

Häufige Ursachen: ein anderer Selektor ist spezifischer, ein Leerzeichen zu viel macht aus .a.b den Nachfahren-Selektor .a .b, oder das Element entsteht erst später per JavaScript. Testen Sie den Selektor mit dem Prüffeld auf dieser Seite und vergleichen Sie die Spezifität.

Weitere Werkzeuge

Das könnte auch helfen

Alle 558 Werkzeuge