About CSS Selector Tester — Test & Match Online
A CSS selector is only as good as the elements it actually matches. Whether you're writing a scraper, a test locator, or a stylesheet rule, the fastest way to know a selector works is to run it against real markup and see what comes back.
This free CSS selector tester does exactly that: paste an HTML snippet, type a selector, and instantly see every matched element, how many there are, and the selector's specificity. Type, class, id, attribute, and combinator selectors are all supported, powered by the browser's own querySelectorAll — so results match what your code will see.
It runs entirely in your browser. Nothing you paste is uploaded, which makes it safe for testing selectors against private or production HTML.
Features
- Live matching against any HTML snippet as you type
- Match count plus each element serialized with its tag and position
- Specificity badge (a, b, c) for resolving cascade conflicts
- Type, class, id, attribute, and combinator selectors; fully offline
How to use
- Paste your HTML snippet into the HTML pane.
- Type a CSS selector in the selector bar at the top.
- Review the match count, the specificity badge, and each matched element.
- Copy the matched markup with "Copy all" if you need it elsewhere.
Frequently asked questions
How do I test a CSS selector online?
Paste your HTML, type a selector, and this tool runs it through the browser's querySelectorAll — the same engine your page uses. It accepts type (div), class (.btn), id (#main), attribute ([data-x], a[href^="https"]), grouping (a, b), and combinators (>, +, ~, descendant), so matches are faithful.
What does the specificity badge (a,b,c) mean?
Specificity decides which CSS rule wins when several target the same element. a counts id selectors, b counts classes, attributes, and pseudo-classes, and c counts type selectors and pseudo-elements. A higher tuple, compared left to right, wins the cascade.
Is my HTML uploaded anywhere?
No. Parsing and matching happen locally in your browser with no network requests, so you can safely test selectors against private or production markup.
Why does my selector match nothing?
Common causes are a typo, a class or id that differs from the markup, or expecting a descendant where the elements are actually siblings. Check the HTML pane and simplify the selector until it matches, then add constraints back.
Related tools
Everything runs locally in your browser — your input is never uploaded.