CSS Selector Tester

Test CSS selectors against HTML markup with matched element highlighting and specificity calculation.

Tested tool guide Tested browser tools Checked August 16, 2026

What CSS Selector Tester does, with a checked example

Paste an HTML fragment and enter a CSS selector to see exactly which elements satisfy it. The tester highlights matching elements and calculates the selector's specificity, answering both targeting and cascade-weight questions. A common mistake is to treat specificity as a measure of how narrowly a selector matches. It is not: a highly specific selector can match nothing or several elements, while a low-specificity type selector can match a single element in the supplied fragment.

Worked example

A concrete input and expected output from the current implementation.

Input

HTML:
<ul id="menu">
  <li class="active">Home</li>
  <li>Docs</li>
</ul>

Selector:
#menu > li.active

Expected output

The first li element, <li class="active">Home</li>, is the only match. The selector specificity is (1,1,1).

#menu contributes one ID, .active contributes one class, and li contributes one type selector. The child combinator contributes no specificity, and only the active direct child satisfies the complete selector.

How the result is produced

Matching the fragment

The HTML field supplies the markup to inspect. The selector is evaluated against elements in that parsed fragment. Descendant, child, sibling, class, ID, and attribute relationships determine the highlighted set. A zero-match result means no element in the fragment satisfies the complete selector; it does not show that every individual part is invalid.

Calculating specificity

Read selector specificity as three components: ID selectors, then classes, attributes, and pseudo-classes, then type selectors and pseudo-elements. Combinators and the universal selector add no weight. Functional pseudo-classes such as :is(), :not(), and :where() have special specificity rules, so complex selectors should be read from the calculated result rather than estimated from punctuation.

Good uses

Debug a stylesheet selector that unexpectedly misses a card, link, form control, or nested component.
Compare a broad selector with a more targeted alternative before adding a rule to an existing cascade.
Verify whether child, descendant, sibling, class, ID, or attribute conditions match a reduced HTML reproduction.

Limits and checks

The result covers only the supplied markup. Selectors needing an omitted ancestor, sibling, or document context can show zero matches even when they work on the full page.
A match and a high specificity do not establish that declarations will win. Importance, origin, cascade layers, inline styles, and source order are separate concerns.
HTML is parsed before selector matching. Error recovery and implied elements can make the tested DOM differ from malformed or context-sensitive source markup.

Common questions

Does a larger specificity value mean the selector is more precise?

No. Specificity is a cascade weight, not a measure of uniqueness, quality, or match count. A selector can have high specificity and still match zero or several elements. Use the highlighted matches to judge targeting, and use specificity only when comparing the cascade weight of selectors that compete.

Does one highlighted match prove that my CSS rule will style that element?

No. A highlighted match proves only that the selector targets the element in the tested fragment. On a real page, declaration validity, importance, origin, cascade layers, inline styles, source order, inheritance, and property-specific behavior can affect the final computed value. Inspect the page's computed styles to determine which declaration actually won.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.