Super Boring Tools

Search tools

Find a tool by name or what it does.

CSS Selector Tester

Paste an HTML fragment and a CSS selector to see exactly which elements match, with an optional highlighted view of the source.

Parsed into a detached document, never rendered on the page. Nothing leaves your browser.

Try

Options

Matches

Paste an HTML fragment to test a selector against.

How to test a CSS selector online

  1. Paste the HTML

    Enter the HTML fragment you want to test a selector against.

  2. Enter a selector

    Type any CSS selector, such as a class, an attribute, or a combination of both, and results update as you type.

  3. Review the matches

    See the match count, plus each matched element with its tag, id, classes, a text preview, and its markup.

  4. Highlight and copy

    Turn on highlighting to see the matches marked in the source, then copy the matched markup.

Why use this tool

Real selector matching

Selectors are matched using the same selector engine your browser uses to render pages, so results reflect exactly how the selector behaves in real code.

Per-match detail

Every match lists its tag name, id, classes, a short text preview, and its own markup, so you can see exactly what was selected.

Clear selector errors

An invalid selector shows the specific reason it failed instead of a silent empty result.

Highlighted source view

Turn on highlighting to see every match marked directly in a read-only view of the HTML you pasted.

Safe by design

The fragment is parsed into a detached document and never rendered on the page, so scripts, styles, and images in the pasted markup never run.

Runs entirely in your browser

Both the HTML and the selector stay on your device. Nothing is uploaded or logged.

About this tool

This tool checks which elements in an HTML fragment a CSS selector matches. Paste any markup and a selector, from a simple class or id to a combination like .card.featured .price or an attribute selector like [data-sku], and the matches update live. Each match is listed with its tag name, id, classes, a short preview of its text, and its own markup, so you can confirm a selector picks exactly what you expect before it ships in a stylesheet or a scraping script.

The fragment is never rendered as a page. It is parsed into a detached document using the browser's own HTML parser, then queried the same way a real stylesheet or script would query it, so results reflect genuine selector behaviour rather than an approximation. Because the fragment is never attached to the page, scripts, styles, and remote images inside pasted markup never execute or load. An invalid selector, such as unmatched brackets or an unsupported pseudo-class, shows the specific parser reason instead of a blank result.

Turning on highlighting marks every match directly in a read-only, escaped view of the source you pasted, which makes it easy to see at a glance whether a selector is too broad or too narrow. To reach for XPath instead of a CSS selector, or to test against a full XML document, use the XPath tester; to strip tags out of markup entirely, remove HTML tags handles that.

Frequently asked questions

Does this run the selector the same way a browser does?
Yes. The fragment is queried with the browser's own selector engine, the same one used by querySelectorAll in real code, so a selector that matches here will match the same elements in a live page with identical markup.
Is the pasted HTML safe to test?
Yes. The fragment is parsed into a detached document that is never attached to the page and never rendered as markup, so any script, style, or image tag inside it does not run or load. You are only ever looking at parsed data and its matches.
What happens with an invalid selector?
The tool shows the specific reason the selector failed to parse, such as an unsupported pseudo-class or unmatched brackets, instead of silently returning zero matches.
How does the highlighted view work?
Each match's markup is located as text within the HTML you pasted and marked in a read-only, escaped view. It works best when the pasted markup is close to how it was written; if quoting or attribute order differs from the matched element's serialized form, that particular match may not be marked.
Is there a limit on how many matches are shown?
The first 200 matches are listed in full. Beyond that, the total match count is still accurate, but the tool notes that the list has been cut off.
Is my HTML uploaded anywhere?
No. Parsing and matching both happen in your browser. The HTML and the selector are never sent to a server, uploaded, or logged.

Related tools