CSS Selector Tester

Run a simple CSS selector against pasted HTML.

Overview

Paste an HTML fragment and a CSS selector and see which elements match - the tool returns each match's tag, attributes, and inner text. Use it to confirm a selector before wiring it into a scraper, a stylesheet, or an end-to-end test.

It's for developers writing CSS, Puppeteer/Playwright selectors, web scrapers, or just debugging why a stylesheet rule "isn't applying." Reach for it when a Cypress cy.get(...) is matching the wrong nodes, a :has() selector behaves unexpectedly, or you're rebuilding a scraper after a site redesign.

How it works

CSS selectors are defined in the W3C Selectors Level 3/4 specifications. The tester parses the selector into compound parts (type, class, ID, attribute, pseudo-class) and walks the parsed HTML tree calling them in left-to-right order with descendant/child/sibling combinators.

The matcher supports the everyday selectors: tag, .class, #id, [attr], [attr=value], [attr*=value], :first-child, :nth-child(n), :not(), and the combinators > (child), + (adjacent sibling), ~ (general sibling), and descendant. Stateful pseudo-classes like :hover or :focus aren't testable in this offline context.

Examples

Match all paragraphs inside .article:
```
<article class="article">
  <p>One</p>
  <p>Two</p>
</article>
```
Selector .article p -> 2 matches.
Pick the first list item:
```
Selector: ul > li:first-child
```
Match by attribute prefix:
```
Selector: a[href^="/docs"]
```
Negation combined with class:
```
Selector: button:not(.disabled)
```

FAQ

Does it support :has() and :is()?

Most modern selectors including :is(), :where(), and :not() work. :has() (the relational pseudo-class) is supported within the limits of the parser - if your selector mixes complex relational queries, double-check the matches against the browser.

Why does my :nth-child look off?

:nth-child counts among siblings of any type, not just the targeted tag. Use :nth-of-type to count only matching tags.

Can I test descendant selectors that span the whole document?

Yes - paste the entire relevant HTML, and selectors with arbitrary depth (body article p span) resolve naturally.

Is this the same engine browsers use?

Functionally yes for the supported subset, but it isn't tied to a specific browser's implementation. For pixel-perfect parity with how Chrome or Firefox resolves a selector, test in DevTools.

Try CSS Selector Tester