CSS Specificity Calculator: Free Online Tool for Web Developers

Every front-end developer has been there: you write a CSS rule, but it doesn't apply. The browser ignores it. The reason? Specificity — CSS's built-in system for deciding which styles win.

What Is CSS Specificity?

Specificity is a weight calculation that determines which CSS declaration is applied when multiple rules match the same element. It's represented as a three-part score: (a, b, c)

a = ID selectors — #header, #main. b = Classes, attributes, pseudo-classes — .card, [type='text'], :hover. c = Elements — div, p, ::before.

New Free Tool: CSS Specificity Calculator

Stop guessing. Our new free calculator lets you paste any CSS selector and instantly see its specificity score, compare multiple selectors side-by-side with visual bars, and get detailed breakdowns of each component.

Key features: instant (a,b,c) scoring, multi-selector comparison, visual bar chart, detailed ID/class/element breakdown, handles :is(), :not(), :where(), :has() correctly, built-in reference guide, 100% client-side.

Key Rules Every Dev Should Know

!important overrides everything — but if you need it, your specificity model is broken.

:where() has zero specificity — great for reset styles that are easy to override.

:is(), :not(), :has() take the specificity of their most specific argument.

One #id beats any number of classes. #nav (1,0,0) beats .a .b .c .d .e .f (0,6,0).

Common Traps

Deep nesting: #main .sidebar .card .title a:hover = 1,4,2 — nearly impossible to override without !important.

Over-qualifying: div.container = 0,1,1. Just .container = 0,1,0 is simpler.

Try it free now → CSS Specificity Calculator

More free developer tools: AI Tools Network — JWT Studio, Cron Builder, JSON Schema Generator, Docker Security Scanner, and more.