CSS Selector Tester
CSS selector
HTML input
Summary
Matched preview
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.
CSS selector checks before using a query in production
Test selectors against representative markup so they match the intended elements without depending on fragile structure or capturing unrelated content.
Positive and negative matches
Include elements that should match, near misses that should not, repeated components, and empty or optional containers.
Dynamic document states
Check markup before and after client rendering, lazy loading, validation, navigation, and state-class changes.
Selector portability
Confirm support for :has(), namespace syntax, escaping, and nonstandard extensions in the exact browser or library that runs the query.
Stable hooks
Use purposeful classes or data attributes for scripts and tests instead of selectors tied to visual nesting or generated class names.
Related tools
You may also find these tools useful.