Zero Signup ToolsFree browser tools

Developer Tools

CSS Selector Tester

Test CSS selectors against any HTML document in your browser. Multi-selector mode, match list, source highlight, specificity hint, and validity checks.

Quick start

Load a sample document

Parsed with the browser's native HTML parser. Optional tags (like <tbody>) are inserted automatically so the matching mirrors how the page would render.

Each line is compiled and run independently against the document. Lines beginning with // or # are treated as comments.

Insert a selector primitive

DOMParser is not defined

Results

0 matches

Across 4 selectors.

h1
Paste an HTML document above before running selectors.
.feature-card .title
Paste an HTML document above before running selectors.
nav a[href^='#']
Paste an HTML document above before running selectors.
button.primary, .cta
Paste an HTML document above before running selectors.

Source highlight

Parsed HTML with matches highlighted

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Acme Cloud</title>
  </head>
  <body class="theme-dark">
    <header>
      <nav aria-label="Primary">
        <a href="#features">Features</a>
        <a href="#pricing">Pricing</a>
        <a href="/docs">Docs</a>
        <a href="/login">Log in</a>
      </nav>
    </header>
    <main>
      <section class="hero">
        <h1>Ship faster</h1>
        <p>Everything you need to deploy in minutes.</p>
        <button class="primary">Start free</button>
        <a class="cta" href="/signup">View demo</a>
      </section>
      <section id="features" class="features">
        <article class="feature-card">
          <h2 class="title">Edge functions</h2>
          <p>Sub-100ms cold starts in every region.</p>
        </article>
        <article class="feature-card featured">
          <h2 class="title">Zero-config builds</h2>
          <p>Detects your framework automatically.</p>
        </article>
        <article class="feature-card">
          <h2 class="title">Preview deploys</h2>
          <p>Every pull request gets its own URL.</p>
        </article>
      </section>
      <section id="pricing">
        <h2>Pricing</h2>
        <button class="primary">Choose plan</button>
      </section>
      <footer>
        <a href="/privacy">Privacy</a>
        <a href="/terms">Terms</a>
      </footer>
    </main>
  </body>
</html>

The source above is the document after the browser parsed it. Auto-inserted tags (<html>, <head>, <body>, <tbody>) and normalized attribute quotes are included so the highlight ranges line up exactly with the elements being matched.

How to use

  1. Pick a Quick start sample (Landing page, Data table, Sign-up form, or Article) to populate the HTML and selector lists, or paste your own HTML on the left and selectors on the right.
  2. Type one selector per line. Each line is compiled and run on its own, so a typo on line three does not blank the results from lines one and two. Use the chips below the selector box to insert common primitives (.class, [attr=value], :nth-child, A > B).
  3. Read the Results panel. Each selector gets its own card with the match count, an approximate specificity triple, and a list of every matched element (tag, id, class list, and a short CSS path).
  4. Scroll to Source highlight to see the parsed HTML with each match wrapped in a colored mark. Colors track the order of the selectors so you can tell which line matched which element.
  5. Click Copy on any matched element to copy its outerHTML, or Copy summary at the top of Results to copy the full report (selector, count, specificity, and the first few CSS paths per line).

About this tool

CSS Selector Tester runs any list of CSS selectors against an HTML document and shows exactly which elements they match. Paste a page, write one selector per line, and the tool compiles each line independently with the browser's native querySelectorAll, then shows the match count, an approximate specificity score, a CSS path for every hit, and a side-by-side source view with each match highlighted in a different color. Invalid selectors are flagged inline with the parser's error message so you can fix a stray bracket without losing the results from the other lines. The HTML is parsed with DOMParser using the text/html mime type, so auto-inserted tags like html, head, body, and tbody appear in the highlight view exactly as the browser would render them. Everything runs locally; the HTML, selectors, and matches never leave the page.

Free to use. Works in your browser. No signup, no login.

Related tools

You may also like

All tools
Developer

CSS Specificity Calculator

Score any CSS selector and compare a list to see which one wins.

Open tool

Developer

Regex Tester

Live regex testing with highlights, capture groups, and replacement preview.

Open tool

Developer

XPath Tester

Evaluate XPath 1.0 expressions against XML or HTML, locally.

Open tool

Developer

Glob Pattern Tester

Test glob patterns and negations against file paths with live results.

Open tool

Developer

HTML Formatter

Pretty-print and minify HTML with indent, wrap, and quote controls.

Open tool

All toolsDeveloper Tools