CSS Specificity Calculator

The CSS Specificity Calculator is a free online tool that parses any CSS selector and computes its specificity as an (a, b, c) triple, with a plain-English breakdown of exactly what matched. Type a selector and it updates live, so you can see instantly why one rule overrides another.

You can also pit two selectors against each other to find out which one wins a conflict. Everything runs locally in your browser, so nothing you type ever leaves your machine.

How to use the CSS Specificity Calculator

1. Type or paste a CSS selector into the input field.
2. Read the (a, b, c) triple and the combined score as they update live.
3. Review the breakdown to see which part contributed to a, b, or c.
4. Enter two selectors in the compare panel to see which one wins a conflict.

What is CSS specificity?

Specificity is the algorithm a browser uses to decide which CSS rule applies when several rules target the same element. It is not a single number but a three-part value written as (a, b, c).

The first part, a, counts ID selectors. The second, b, counts classes, attribute selectors, and pseudo-classes. The third, c, counts element (type) selectors and pseudo-elements.

Browsers compare the triples from left to right. A selector with a higher a always beats one with a lower a, no matter how large b or c grow.

Why does specificity matter?

When your styles do not apply as expected, specificity is usually the reason. A more specific rule elsewhere is quietly overriding yours.

Understanding the exact score helps you fix the conflict cleanly, without reaching for !important or piling on extra selectors that make the stylesheet harder to maintain.

How the (a, b, c) score is counted

Each simple selector adds to exactly one column. An ID like #header adds one to a. A class like .card, an attribute like [type="text"], or a pseudo-class like :hover each add one to b.

An element such as div or a pseudo-element such as ::before each add one to c. The universal selector * and combinators contribute nothing at all.

How are :not(), :is(), and :has() handled?

These functional pseudo-classes do not add weight on their own. Instead, they take on the specificity of the most specific selector inside their parentheses.

For example, :not(#id) contributes the same as an ID. The :where() pseudo-class is the exception: it always counts as zero, which makes it perfect for low-priority base styles.

Specificity vs. source order and !important

Specificity is checked before source order. Only when two selectors score identically does the later rule in the stylesheet win.

Inline style attributes outrank any selector, and !important overrides normal declarations entirely. Both are best used sparingly, because they break the natural cascade and are hard to override later.

Related tools for front-end work

Once your selectors behave, the rest of your workflow can stay just as tidy. Shrink your stylesheet for production with the CSS Minifier, turn icons and shapes into inline background styles with the SVG to CSS converter, and confirm your text meets accessibility guidelines with the Color Contrast Checker.

Frequently Asked Questions

What is CSS specificity?

CSS specificity is the weight a browser gives each selector when two or more rules target the same element. It is expressed as three numbers (a, b, c): a counts IDs, b counts classes, attributes, and pseudo-classes, and c counts elements and pseudo-elements. When rules conflict, the selector with the higher specificity wins, regardless of source order.

How is specificity calculated as (a, b, c)?

Count the parts of your selector by type. Every ID adds one to a. Every class, attribute, and pseudo-class adds one to b. Every element and pseudo-element adds one to c. Compare the triples left to right: a is checked first, then b, then c.

Does the universal selector affect specificity?

No. The universal selector * and combinators such as >, +, ~, and the descendant space add nothing to specificity. They are structural and do not raise the (a, b, c) score.

How do :not(), :is(), and :has() count?

The pseudo-classes :not(), :is(), and :has() do not add specificity themselves. Instead, they contribute the specificity of the most specific selector inside their argument list. The special :where() pseudo-class always contributes zero.

What beats what when selectors tie?

When two selectors have identical specificity, the one that appears later in the stylesheet wins because of source order. Inline styles beat any selector, and a declaration marked !important overrides normal declarations entirely, so it is best avoided unless truly necessary.

Is my selector data sent to a server?

No. The calculator parses and scores your selector entirely in your browser using client-side JavaScript. Nothing you type is uploaded, logged, or stored, so it is safe to use with private or proprietary code.