CSS Specificity Calculator

Specificity is (a=1, b=2, c=1). Higher a wins first, then b, then c regardless of source order.

How it works

• Count id selectors as a.
• Count classes, attributes and pseudo-classes as b.
• Count type selectors and pseudo-elements as c; `:where()` adds nothing and `*` adds nothing.
• For `:not()`, `:is()` and `:has()`, use the most specific argument.

specificity = (ids, classes/attributes/pseudo-classes, types/pseudo-elements)

• Inline styles and `!important` are handled separately by the cascade and are not part of this triple.
• This is a pragmatic tokeniser: it follows the CSS Cascade rules for the common selector grammar.

Methodology

1. Split the input on top-level commas into a selector list.
2. Walk each selector and count id selectors (a), class/attribute/pseudo-class selectors (b) and type/pseudo-element selectors (c).
3. Treat `:where()` as zero and `:not()`/`:is()`/`:has()` as the most specific argument.
4. Report the highest triple for the list and label the most and least specific selectors.

Usage

1. Enter one CSS selector, or a comma-separated selector list.
2. Read the (a, b, c) specificity triple and the per-component breakdown.
3. For a list, compare the most and least specific selectors.

Examples

These are examples, not current values: they use fixed inputs, while the interactive tool computes live results in your browser.

Id, class, type and pseudo-class

{
  "selector": "#app .card a:hover"
}

Attribute and pseudo-element

{
  "selector": "input[type='text']::placeholder"
}

Selector list

{
  "selector": "ul li, .nav a, #main"
}

Limitations

About the specificity triple

The triple (a, b, c) is compared left to right: a higher `a` always wins, then a higher `b`, then `c`. This is why a single id selector beats any number of classes, and why the number is written `1,1,3` rather than a single integer.

The calculator is a reading aid for debugging the cascade. It does not evaluate `@layer`, `@scope`, inline styles or `!important`, so use it alongside the browser devtools for the full picture.