CSS Selector Tester
Test a CSS selector against your HTML and see exactly which elements it matches, in your browser.
How to use
- Paste your HTML into the first box.
- Type a CSS selector (for example li.item or a[href^="https"]).
- See the match count and each matching element; copy them if needed.
About this tool
ShowHide
Paste some HTML and a CSS selector and see every element the selector matches, with a count and the markup of each hit. It runs on the browser's own selector engine, so the result is identical to what document.querySelectorAll would return in a page — which is what makes it useful for debugging a scraper, a stylesheet or a brittle test selector before you go back to the real site. Invalid selectors are flagged rather than silently returning nothing. Two things follow from working on a parsed but unrendered document: selectors that depend on live state or layout, such as :hover, :visited and :target, will not match, and the HTML is parsed by the full HTML rules, so a fragment like a bare table row outside a table is discarded exactly as a browser would discard it.
Frequently asked questions
Which selectors are supported?
Any selector your browser supports via querySelectorAll, including combinators, attribute selectors, :not(), :nth-child() and more. Pseudo-elements like ::before match nothing, as in the DOM.
Are the results accurate?
Yes. The HTML is parsed into a real document and queried with the browser's native selector engine, so matches are exactly what querySelectorAll would return on that markup.
What if my selector is invalid?
The selector field is highlighted and an error message is shown, instead of returning misleading results.
Is my HTML sent anywhere?
No. Parsing and matching happen entirely in your browser; nothing is uploaded.
Why does :hover never match anything here?
Because the document is parsed but not rendered or interacted with, so there is no pointer, no visited history and no layout. Selectors that depend on live state — :hover, :focus, :visited, :target — have nothing to be true about. Everything structural, from :nth-child to :has, works normally.
My pasted fragment lost its rows. What happened?
The HTML parser applies the same rules a browser does, and table rows are only valid inside a table. A bare tr or td fragment gets discarded exactly as it would on a real page — wrap it in a table element and the selector will find it.
Related tools
CSS Specificity Calculator
Paste any CSS selector to see its (ID, class, type) specificity, per-token breakdown, and head-to-head comparison with another selector.
Developer
HTML / CSS / JS Minifier
Strip whitespace and comments from HTML, CSS, or JavaScript — see the size saved and copy the result.
Developer
XPath Tester
Run an XPath expression against XML or HTML in your browser and see every node it matches, with namespace prefixes and parse errors reported.
Developer
Color Name Finder
Find the closest CSS, Tailwind, or XKCD-survey color name for any hex/RGB input — ranked by perceptual distance in OKLab color space.
Color & CSS
CSS Named Colors
All 147 CSS / X11 named colors with HEX, RGB, and a live swatch — searchable and grouped by hue.
Color & CSS
Regex Tester
Test JavaScript regular expressions live with highlighted matches and replace preview.
Developer