What is a CSS Selector Tester?
A CSS Selector Tester runs a selector against pasted HTML and shows matching elements, ids, classes, attributes, text previews, snippets, and DOM paths.
CSS Selector Tester
Paste HTML and a CSS selector to find matching elements, inspect results, and debug selector behavior locally.
Paste HTML and enter a CSS selector to begin.
HTML input
HTML is parsed as a detached document and never rendered into this page.
Use type, class, id, attribute, descendant, child, sibling, and browser-supported pseudo-class selectors.
Selector results
Matched elements, snippets, attributes, text previews, DOM paths, warnings, and JSON report output.
Ready to test CSS selectors
Paste HTML, enter a CSS selector, or load a sample. Valid small inputs are tested automatically after a short pause.
CSS Selector Testing Guide
Debug CSS selectors against HTML without rendering the markup
Use CSS Selector Tester to inspect which elements match frontend selectors, scraper selectors, test automation locators, style rules, and markup transformations.
Common selector syntax
Use type selectors like article, class selectors like .card, ids like #main, attributes like [data-status="open"], and combinations like nav a.active.
Child and sibling selectors
Use > for direct children, whitespace for descendants, + for the next sibling, and ~ for following siblings.
querySelectorAll behavior
The tool uses browser querySelectorAll, so selector support matches your browser. Unsupported or invalid selectors return a clear syntax error.
Pseudo-classes
Structural pseudo-classes such as :first-child, :nth-child(), and supported selectors such as :has() follow browser behavior in the detached document.
CSS Selector Tester vs XPath Tester
CSS selectors are concise for HTML elements, classes, ids, and attributes. XPath is better when you need XML querying, text-node selection, or parent-axis traversal.
Debugging no matches
Check spelling, case, missing classes, exact attribute values, child versus descendant relationships, sibling direction, and whether the HTML parser repaired malformed markup.
Safe snippets
Matched snippets are displayed as escaped text. Pasted scripts, inline handlers, forms, iframes, and external URLs are not executed or fetched.
Large result sets
Broad selectors such as *, div, and span can match many elements. Use the result limit and narrow selectors to keep reports useful.
CSS Selector Tester FAQ
Does this CSS Selector Tester upload my HTML?
No. HTML parsing and selector testing happen locally in your browser.
Does pasted HTML render or execute?
No. The markup is parsed in a detached document for selector testing. Results are displayed as escaped text, not live HTML.
Which selectors are supported?
Selectors supported by the current browser querySelectorAll API are supported, including common type, class, id, attribute, descendant, child, sibling, and supported pseudo-class selectors.
Why do pseudo-elements not match?
Pseudo-elements such as ::before and ::after are not DOM elements, so querySelectorAll does not return them as matches.
Why does a selector match in DevTools but not here?
Browser DevTools runs against a live rendered page with runtime state. This tester runs against detached pasted HTML, so dynamic DOM changes and interactive state may differ.
Can I copy the matched HTML?
Yes. Copy the displayed matched snippets, copy the JSON report, or download the report as a JSON file.
When should I use XPath Tester instead?
Use XPath Tester for XML, attribute or text-node selection, namespace-aware XML queries, or query patterns that need axes not available in CSS selectors.