CSS Selector Tester
CSS selector
HTML input
Summary
Matches
0
Status
Idle
The preview runs in a sandboxed frame. Matching elements are outlined and numbered.
Matched preview
Matched elements
Test a selector to see matched elements.
About CSS Selector Tester
CSS Selector Tester checks a selector against a block of HTML using the browser's native selector engine.
It is useful when debugging complex selectors, verifying attribute selectors, checking nested markup, or confirming what querySelectorAll would match.
How to use this tool
- Paste HTML into the HTML input field.
- Enter the CSS selector you want to test.
- Click Test selector to view matching elements, paths, and a highlighted preview.
Tips
- Use the specificity calculator when two matching selectors compete in the cascade.
- Invalid selectors are reported by the browser selector parser.
- The preview is sandboxed so pasted markup does not run scripts.
Related tools
You may also find these tools useful.
CSS Specificity Calculator
Calculate and compare CSS selector specificity scores.
Developer Misc
›
CSS Minifier / Beautifier
Minify CSS to reduce file size or beautify compressed CSS for easier reading.
Developer Misc
›
HTML Minifier / Beautifier
Compress and format HTML code instantly.
SEO & Webmaster
›
Regex Tester
Test regular expressions against text and see matches instantly.
Text & Content
›
CSS Grid Generator
Build CSS Grid layouts with columns, rows, gaps, alignment, live preview, and copy-ready CSS.
Developer Misc
›
CSS selector tester FAQ
Does this support modern CSS selectors?
It supports selectors available in your browser's querySelectorAll implementation.
Can I test attribute selectors?
Yes. Attribute selectors such as [data-state='active'] are supported.
Does the HTML execute scripts?
No. The preview is rendered in a sandboxed frame and script-like content is removed before previewing.
Why does a selector fail?
The selector may be invalid, unsupported by the current browser, or simply not match the supplied HTML.