CSS-Selektor-Tester

Testet Selektoren gegen HTML.

Selector

HTML

Ausgabe

So nutzen Sie es

Vier Schritte: einfügen, ausführen, prüfen, kopieren. Alles bleibt im Browser.

Eingabe einfügen

CSS, HTML, JSON oder anderen Text einfügen. Nichts wird hochgeladen.

Tool ausführen

Auf Konvertieren oder Ausführen klicken. Das Ergebnis erscheint sofort.

Ausgabe prüfen

Generierten Code und Hinweise prüfen, bevor Sie ihn übernehmen.

Kopieren und nutzen

Ausgabe kopieren und in Ihr Projekt einfügen.

Über dieses Tool

Der Tester prüft einen CSS-Selektor gegen ein kleines HTML-Beispiel und listet die gefundenen Treffer. Die Auswertung passiert lokal per DOMParser, es verlässt nichts den Browser.

Beispiel

Das Beispiel enthält eine Karte mit Kind-Überschrift und ein Geschwisterelement ohne Klasse.

Eingabe

div.card > h2

Ausgabe

1 match(es): <h2>…</h2>

Tipp

Sehr anschaulich, um :nth-child oder den Unterschied zwischen Kind- und Nachfahrenkombinator zu erklären.