CSS Selector Tester
Paste HTML markup and a CSS selector to instantly see which elements match, with specificity and path details.
About This Tool
The CSS Selector Tester is a free, browser-based tool that lets you test any CSS selector against HTML markup and instantly see which elements match. Whether you are debugging a stylesheet, learning CSS selectors, or writing scraping queries, this tool provides immediate visual feedback with highlighted matching lines, element details, and specificity calculation.
All processing happens entirely in your browser using the native
DOMParser and querySelectorAll APIs. Your HTML never leaves your
machine — there are no server round-trips, no logging, and no
third-party services involved. This makes it safe to test selectors
against proprietary markup, internal templates, and production HTML.
The tool supports every CSS selector the browser understands,
including class selectors, ID selectors, attribute selectors,
combinators (>, +, ~), pseudo-classes (:nth-child,
:first-of-type, :not()), and more. For each query, the tester
displays the number of matched elements, the specificity of the
selector broken down into IDs, classes/attributes/pseudo-classes,
and elements/pseudo-elements, plus a detailed card for every matched
element showing its tag name, ID, classes, CSS path, and text content.
If you need to understand how specificity is calculated, pair this tool with the CSS Specificity Calculator. For a complete reference of all available selectors, check the CSS Selector Reference. To preview full HTML pages with embedded styles, try the HTML Live Preview.
How to Use
- Click Sample to load example HTML and a selector, or paste your own HTML into the HTML Markup textarea.
- Type a CSS selector into the CSS Selector input field at the top.
- The preview panel on the right instantly highlights lines that contain matching elements.
- Review the match count and specificity badges in the toolbar for a quick summary.
- Scroll down to the Matched Elements section to see each matched element’s tag name, ID, classes, CSS path, and text content.
- Check the Specificity Breakdown panel for a visual split of IDs, classes, and element counts.
- Click Copy or press Ctrl+Shift+C to copy all matched element details to your clipboard.
- Click Clear to reset both inputs and start over.
Popular CSS Selector Examples
FAQ
Is my data safe when using this tool?
Yes. All processing runs entirely in your browser using the native DOMParser API. No HTML or selectors are sent to any server, stored, or logged. You can safely test selectors against proprietary or sensitive markup.
What CSS selectors are supported?
The tool supports every CSS selector your browser supports, including element selectors, class selectors, ID selectors, attribute selectors, combinators (descendant, child, adjacent sibling, general sibling), pseudo-classes (:hover, :nth-child, :not, etc.), and pseudo-elements (::before, ::after).
How is selector specificity calculated?
Specificity is displayed as three numbers (a, b, c) where a = number of ID selectors, b = number of class selectors, attribute selectors, and pseudo-classes, and c = number of element selectors and pseudo-elements. A higher number in an earlier position always wins.
Can I test selectors with pseudo-classes like :hover?
You can type pseudo-class selectors, but since this tool uses querySelectorAll under the hood, dynamic pseudo-classes like :hover or :focus will not match any elements because no user interaction is occurring. Static pseudo-classes like :first-child, :nth-child(), and :not() work correctly.
What happens with invalid HTML?
The browser's DOMParser is very forgiving with invalid HTML. It will attempt to parse and correct the markup automatically, similar to how a browser would render it. The selector will then be tested against the corrected DOM tree.
Can I test multiple selectors at once?
Yes. CSS supports comma-separated selector lists (e.g., 'h1, h2, .title'). The tool will match all elements that satisfy any of the listed selectors, and the specificity shown will be for the full selector string.
Is there a size limit for the HTML input?
There is no hard limit, but very large HTML documents (hundreds of kilobytes) may cause the browser to slow down during parsing and highlighting. For best performance, test with representative HTML snippets rather than entire pages.
Related Tools
CSS Specificity Calculator
Calculate and compare CSS selector specificity scores. Visualize which selector wins in a cascade.
CSS Selector Reference
Complete interactive CSS selector reference with specificity calculator, live preview, searchable categories, and browser support for every selector.
CSS Layout Generator
Visually build Flexbox and CSS Grid layouts with live preview and generated CSS code.
Tailwind CSS Playground
Preview Tailwind CSS classes in real-time. Type class names and see the styles applied instantly with responsive breakpoint testing.
HTML Live Preview
Write HTML, CSS, and JavaScript with instant live preview in a sandboxed iframe. No setup required.
CSS Container Query Builder
Build CSS container queries visually with container type, name, and size conditions.