LangStop

CSS Selector Tester — Validate CSS Selectors Online

CSS Selector Tester

Paste CSS selectors, one per line, and click Test Selector to check that each one is valid and see its specificity. Testing runs in your browser.

What it checks

For every line, the tool reports:

  • ✓ Valid, or the reason the selector cannot be parsed — for example an unclosed attribute bracket (a[href) or a stray parenthesis (div)).
  • A warning for uppercase tag names such as DIV. HTML matches them case-insensitively, but they fail in XML and SVG documents and in most style guides.
  • Specificity as (IDs, classes, elements), so you can see which selector will win.
.card .title
  ✓ Valid
  Specificity: (0, 2, 0) → Score: 20

The check is structural: it does not know the list of real pseudo-class names, so a typo such as a:hovr is reported as valid. The browser check below catches those.

Class selectors, IDs, attribute selectors ([data-state="open"]), pseudo-classes (:hover, :nth-child(2n+1), :not(), :has()), pseudo-elements (::before) and all combinators ( , >, +, ~) are supported.

Testing against real HTML

This tool validates syntax; it does not match selectors against a page. To see which elements a selector matches, open your browser's developer tools console on the page and run:

document.querySelectorAll(".card .title")

An invalid selector throws a SyntaxError there, which is the same error your stylesheet's rule would silently ignore.

Why validate selectors?

  • One invalid selector drops the whole rule. In a:hover, a:hovr { … }, the misspelt pseudo-class makes the browser discard the entire rule, including the valid a:hover.
  • Selectors in JavaScript fail loudly. querySelector with an invalid selector throws and stops your script.
  • Test automation — Playwright, Cypress and Selenium locators are often CSS selectors; validating them first saves a failed test run.

Tips

  • Escape special characters in IDs and classes: an ID of 1-col is written #\31 -col, and a class md:flex is .md\:flex.
  • Prefer stable hooks such as [data-testid="save"] for tests over long structural selectors.