CSS Selector Tester Online — Free Selector Validator & Specificity Calculator

How to CSS Selector Tester Online

1. 1

   Paste your HTML markup into the HTML textarea on the left. You can type, paste, drag-and-drop a file, or load one of the built-in examples using the Examples button next to the selector bar.

2. 2

   Type a CSS selector in the selector input bar below the HTML panel. The selector is validated in real-time — an error banner appears immediately if the syntax is invalid.

3. 3

   Matched elements are highlighted automatically with a 300 ms debounce. Click 'Test' (or press ⌘↵) to run immediately.

4. 4

   Switch to the Matches tab (right panel) to browse all matched elements. Each card shows the tag name, id, class list, text content, element path, and full attributes. Click any card to expand it and copy the outerHTML.

5. 5

   Switch to the Highlight tab to see the original HTML source with each matched element visually highlighted in color, making it easy to spot exactly what your selector targets.

6. 6

   Switch to the Specificity tab to see a visual breakdown of the selector's (IDs, Classes, Elements) specificity tuple with color-coded bars and a numeric score.

7. 7

   Open the Selector Reference panel (BookOpen icon or ⌘⇧H) for a categorized quick-insert library of common selectors — click any entry to load it into the selector bar.

8. 8

   Copy all matched outerHTML strings at once using the copy icon in the Matches tab header (⌘⇧C). Individual element HTML can be copied from each expanded card.

9. 9

   Use ⌘⇧K to clear both the HTML and selector fields and start fresh.

CSS Selector Tester Features

• ✓

  Real-time selector testing: runs querySelectorAll against your HTML on every keystroke with a 300 ms debounce for instant feedback.

• ✓

  Browser-native matching: uses the browser's built-in DOMParser and querySelectorAll — supports every selector your browser supports, including modern CSS4 selectors.

• ✓

  Three-panel results: Matches list (collapsible cards), HTML Highlight (source with color marks), and Specificity breakdown.

• ✓

  Specificity calculator: computes the (IDs, Classes, Elements) tuple and numeric score for any selector — handles :is(), :not(), :has() (takes highest argument specificity) and :where() (zero specificity) per the CSS spec.

• ✓

  Element path display: each matched element shows its full ancestor path (e.g. div.container > ul > li:nth-child(2)) for precise identification.

• ✓

  Attribute inspector: every matched element card expands to show all attribute key-value pairs and the full outerHTML.

• ✓

  HTML Highlight view: annotates the original HTML source with color-coded marks on matched elements using up to four distinct highlight colors.

• ✓

  Selector Reference panel: categorized library of 26 common selectors (Basic, Combinators, Attribute, Pseudo-class, Pseudo-element, Modern CSS) with descriptions and one-click insert.

• ✓

  Examples dropdown: five built-in examples (class selector, child combinator, attribute selector, nth-child, :has()) load both the HTML and selector at once.

• ✓

  Copy individual or all matches: copy a single element's outerHTML from its card, or copy all matched elements at once.

• ✓

  localStorage persistence: HTML and selector are saved automatically and restored on the next visit — no data loss on page refresh.

• ✓

  Fully client-side: all parsing and matching runs in your browser — no HTML or selector data is ever sent to a server.

• ✓

  Invalid selector error banner: shows the exact browser error message when querySelectorAll rejects a malformed selector.

• ✓

  Execution time and element count stats: see how many elements are in the document and how long the query took in milliseconds.

• ✓

  Keyboard shortcuts: ⌘↵ Test, ⌘⇧C Copy matches, ⌘⇧K Clear, ⌘⇧H Toggle reference.

Frequently Asked Questions

What CSS selectors are supported?

All selectors supported by your browser's native querySelectorAll API. This includes every CSS3 selector (class, ID, attribute, combinator, pseudo-class, pseudo-element) plus modern CSS4 features like :has(), :is(), :where(), :not() with complex arguments, :nth-child(An+B of selector), and CSS nesting. Browser support determines what works — Chrome 105+, Firefox 121+, and Safari 15.4+ all support :has().

Is my HTML sent to a server?

No. All HTML parsing and selector matching runs entirely in your browser using the native DOMParser API. Neither your HTML nor your selectors are transmitted to any server. The tool works fully offline once the page has loaded.

How is specificity calculated?

Specificity is expressed as a three-part tuple (a, b, c): a = number of ID selectors (#id), b = number of class selectors (.class), attribute selectors ([attr]), and pseudo-classes (:hover, :nth-child), c = number of type selectors (div, span) and pseudo-elements (::before). The numeric score is a×100 + b×10 + c. The universal selector (*) and combinators (>, +, ~, space) contribute zero specificity. :is(), :not(), and :has() take the specificity of their most specific argument; :where() always contributes zero.

Why does my selector work in DevTools but not here?

The most common reason is that the HTML you pasted is a fragment rather than a full document. The DOMParser wraps fragments in a full document with implicit <html>, <head>, and <body> elements, so absolute selectors like 'html > body > div' might not match as expected. Also check that your selector doesn't rely on dynamic state (:hover, :focus, :checked) — those only apply to live interactive elements, not parsed static HTML.

What does the :has() selector do?

:has() is a relational pseudo-class that selects an element if any of the selectors in its argument list match at least one element relative to it. For example, div:has(> img) selects all <div> elements that have a direct <img> child. :has() is supported in Chrome 105+, Safari 15.4+, and Firefox 121+.

What is the difference between :is() and :where()?

:is(h1, h2, h3) matches any element that satisfies any of the listed selectors and contributes the specificity of its most specific argument. :where(h1, h2, h3) matches the same elements but always contributes zero specificity — it is useful for writing base styles that can be easily overridden. Both forgiving selector lists (invalid arguments are silently ignored rather than invalidating the whole rule).

How do attribute selectors work?

[attr] selects elements with the attribute present. [attr='value'] matches an exact value. [attr^='val'] matches values starting with 'val'. [attr$='val'] matches values ending with 'val'. [attr*='val'] matches values containing 'val'. [attr~='val'] matches a space-separated word. [attr|='val'] matches 'val' or 'val-' prefix (useful for lang attributes). All are case-sensitive by default; add i before the closing bracket ([attr='val' i]) for case-insensitive matching.

What is selector specificity used for?

Specificity determines which CSS rule wins when multiple rules target the same element. A higher specificity score overrides lower scores. Inline styles have the highest specificity, followed by ID selectors, then class/attribute/pseudo-class selectors, then type selectors. Understanding specificity is essential for debugging why a style is not being applied or being unexpectedly overridden. Use :where() to write zero-specificity base styles that are always safe to override.

Can I test :nth-child() and :nth-of-type() selectors?

Yes. Both pseudo-classes accept the An+B formula — for example :nth-child(2n+1) matches odd children, :nth-child(3n) matches every third child, :nth-child(-n+3) matches the first three. Modern browsers also support :nth-child(2n of .class) which applies the An+B filter only to elements matching the given selector list.

Does it work offline?

Yes. All selector testing and specificity calculation happens in the browser with no network requests. Once the page has loaded, the CSS Selector Tester works fully without an internet connection.

Related Developer Tools

• HTML FormatterFormat, minify, and validate HTML with attribute sorting and template support.
• CSS FormatterFormat, minify, and validate CSS with sorting and SCSS conversion.
• Regex TesterTest, debug, and explain regular expressions with real-time match highlighting.
• JSON Path TesterQuery and extract data from JSON documents using JSONPath.