CSS Specificity Calculator

Calculate the specificity of any CSS selector and compare multiple selectors.

#nav .item:hover

1

a (IDs)

2

b (classes)

0

c (elements)

Score

120

Related Tools

🖥️
CSS Unit Converter
Convert px to rem, em, vw, pt, and other CSS units with a configurable base font size.
 🎨
CSS Gradient Generator
Build linear and radial CSS gradients visually and copy the code.
 🌫️
CSS Box Shadow Generator
Visually build a CSS box-shadow and copy the code.

0 comments

How it works

Enter a CSS selector (e.g. `#nav .item:hover`). The tool scans for IDs (contribute a=1 each), class names/attributes/pseudo-classes (b=1 each), and element names/pseudo-elements (c=1 each). The specificity is expressed as (a, b, c) — a higher value in a left column always wins regardless of how large the right columns are. A numeric score (a×100 + b×10 + c) is shown for easy comparison. Enter multiple selectors to compare them side by side.

Common use cases

  • Debugging why one CSS rule overrides another unexpectedly.
  • Learning how the CSS cascade works through interactive examples.
  • Comparing the specificity of two selectors to decide which will win.

Frequently asked questions

Does !important affect specificity?

!important is not part of specificity — it overrides specificity entirely. A rule with !important beats any other declaration regardless of selector specificity.

What about the universal selector (*) and combinators?

The universal selector (*), combinators (+, >, ~, space), and :where() all contribute 0 to specificity.