CSS-Selektor-Tester
Testet Selektoren gegen HTML.
Ü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.
So nutzen Sie es
Selektor und HTML-Beispiel anpassen, Test starten und danach Trefferzahl sowie die ausgegebenen Ausschnitte kontrollieren. Anschließend lässt sich das Ergebnis mit den Annahmen im eigenen JavaScript vergleichen.
Beispiel
Das Beispiel enthält eine Karte mit Kind-Überschrift und ein Geschwisterelement ohne Klasse.
Eingabe
div.card > h2Ausgabe
1 match(es): <h2>…</h2>Tipp
Sehr anschaulich, um :nth-child oder den Unterschied zwischen Kind- und Nachfahrenkombinator zu erklären.
Gut zu wissen
Wird mein HTML irgendwohin gesendet?
Nein. Das Beispiel wird mit dem DOMParser des Browsers auf dieser Seite geparst, der Selektor läuft mit querySelectorAll.
Warum liefert ein gültiger Selektor keinen Treffer?
Meist ist ein Kombinator oder Klassenname um eine Ebene daneben. Prüfen Sie Kind (>) gegen Nachfahre (Leerzeichen) und vergleichen Sie die Schreibweise der Klasse mit Ihrem Beispiel-Markup.