CSS Selector Tester (Live HTML Match)

Type any CSS selector — basic, combinators, pseudo-classes — and see which elements in an HTML snippet match. Useful for verifying selectors before using them in querySelectorAll, ScraPy, or stylesheets.

How to use the CSS Selector Tester (Live HTML Match)

Paste an HTML snippet and type a CSS selector. Matching elements are highlighted live as you type, with a count of how many matched. Use the example buttons to try combinators, :nth-child, and attribute selectors.

Testing CSS selectors live

CSS selectors drive more than stylesheets — they are how querySelectorAll, scraping libraries (Cheerio, Scrapy, soupsieve), and test frameworks locate elements. A selector with combinators, :nth-child, or attribute matches is easy to get subtly wrong, and you often only discover it failed to match at runtime.

This evaluates a selector against an HTML snippet in real time and highlights every element it matches, so you can confirm it before pasting it into code or a stylesheet. For XPath expressions against XML or HTML instead, the XPath tester is the equivalent; when the goal is pulling a table out of a page, the HTML table to CSV and HTML table to JSON converters take it from there.

Common use cases

  • Verify before querySelectorAll — confirm a selector matches before using it in JS.
  • Debug a scraper — find why a Cheerio or Scrapy selector returns nothing.
  • Test combinators — child, sibling, and descendant combinators against real markup.
  • Try pseudo-classes — :nth-child, :not(), and attribute selectors.
  • Check a rule’s target — see exactly which elements a stylesheet rule would hit.

Frequently asked questions

Which selectors are supported?
Anything the native querySelectorAll supports — classes, IDs, attributes, combinators, and pseudo-classes like :nth-child and :not().

Does it run my selector for real?
Yes — it uses the native querySelectorAll, so behaviour matches what your JavaScript will do.

How do I test XPath instead?
Use the XPath tester for XPath 1.0 against XML or HTML.

Can it match pseudo-elements like ::before?
No — pseudo-elements match nothing via querySelectorAll; they only apply during CSS rendering.
Embed this tool on your site

Free to embed, no attribution required (but appreciated). Paste this where you want the tool to appear: