CSS Specificity Calculator

Calculate selector specificity.

Input

Output

How to use

Four quick steps — paste, run, review, copy. Everything stays in your browser.

Drop CSS, HTML, JSON, or other text into the editor. Nothing is uploaded.

Click Convert or Run. The result appears instantly on this page.

Read the generated code and any review notes before you ship it.

Copy the output to your clipboard and paste it into your project.

Compute classic (a,b,c) specificity so you can see why one rule wins over another without opening DevTools every time.

Example mixes elements and classes — typical of legacy nav CSS.

Input

nav.site-header .menu a.active

Output

Selector: nav.site-header .menu a.active
Specificity: (0,3,2)
IDs: 0
Classes/attributes/pseudo-classes: 3
Elements/pseudo-elements: 2

If you need !important often, specificity debt is the real bug.