CSS SELECTOR TESTER
Check which elements a selector matches in your HTML and how specific it is.
In short
Paste HTML and a CSS selector to see exactly which elements it matches, how many, and the selector's specificity as (IDs, classes, types). Matching uses the browser's own querySelectorAll, so results are what a real stylesheet would hit. Everything runs in your browser and nothing is uploaded.
DOMParser is not defined
Example output (default settings)
(1, 2, 2) #main-nav li.item > a[href^='/']How to test a CSS selector
- 1
Paste or type the HTML you want to test against.
- 2
Enter a CSS selector, or a comma-separated list of selectors.
- 3
Read the match count and the list of matched elements, each with its position in the document.
- 4
Check the specificity shown for each selector to see which rule would win.
- 5
Adjust the selector until it matches exactly the elements you want.
Questions
- How does the tester find matching elements?
- It parses your HTML with the browser's DOMParser and runs document.querySelectorAll() with your selector. That is the same engine your stylesheets and JavaScript use, so modern selectors like :has(), :is() and :not() behave as they do in your browser.
- How is specificity calculated?
- Specificity is shown as (a, b, c): a counts ID selectors, b counts classes, attribute selectors and pseudo-classes, and c counts type selectors and pseudo-elements. :where() adds nothing, while :is(), :not() and :has() take the specificity of their most specific argument. Inline styles and !important are not part of this number.
- Why does my selector show an error?
- The browser rejects selectors that are not valid CSS, such as an unclosed bracket or a stray combinator. The error message from the browser is shown so you can fix the syntax. Class names starting with a digit need escaping, for example .\31 0.
- Can I test a list of selectors at once?
- Yes. Separate selectors with commas and the tester shows the combined matches plus a specificity line for each selector in the list, since each one is scored on its own in CSS.
- Is my HTML sent anywhere?
- No. Parsing and matching happen locally in your browser. The HTML is parsed into a detached document, so scripts in it are not executed.
Related tools
- Regex TesterTest a regex against a string with live match highlighting.
- Cron Expression GeneratorBuild cron schedules visually or from presets, copy the expression, and preview the next 5 run times in your local timezone.
- Regex ExplainerPaste a regular expression and get a plain-English breakdown of every token, group, and quantifier.
- Regex Escape ToolEscape special characters so text matches literally in a regex, for JavaScript, Python, PCRE, or POSIX, or unescape it back.
- CSS Escape GeneratorEscape text for a safe CSS class/ID selector or string literal, using the browser's native CSS.escape().
- UUID ValidatorValidate one or many UUIDs at once. Detects version (v1–v8) and variant, normalizes compact or braced formats — nothing uploaded.
- YAML ValidatorValidate YAML syntax instantly and preview the parsed structure as formatted JSON. Clear error messages on failure — nothing uploaded.
- HTML/CSS/JS Beautifier & MinifierBeautify or minify HTML, CSS, and JavaScript instantly in your browser — no upload, no account.
Updated