CSS Specificity Calculator

Calculate the specificity of any CSS selector with a visual breakdown.

Quick answer: Calculate CSS selector specificity scores online. Debug why styles aren't applying with a visual breakdown of ID, Class, and Element weights.

CSS selector

specificity1,2,1

IDs (a)1

Classes, attrs, pseudo-classes (b)2

Elements, pseudo-elements (c)1

Selector breakdown

#navid.itemclass:hoverpseudo-classaelement

Try an example

parsed locally — nothing leaves your browser

Calculate the specificity of any CSS selector as an (a, b, c) score, with a color-coded breakdown of every component — so you can understand why one rule overrides another.

How it works

Enter your complex CSS selector string into the input bar.
The engine dissects the string into IDs, Classes, and Elements.
Read the calculated (a, b, c) weight score to understand the cascade priority.

Frequently asked questions

How exactly is CSS specificity calculated by the browser?

It evaluates from left to right: IDs (a), then Classes (b), then Elements (c). A score of (1,0,0) will categorically override a score of (0,99,99).

Does !important increase specificity mathematically?

No. `!important` fundamentally hijacks the cascade and overrides specificity entirely. It should be used as a last resort.

Why does the :where() pseudo-class count as a zero score?

The modern `:where()` selector was explicitly designed by specification to have zero specificity, allowing developers to create highly flexible, easily overrideable defaults.