CSS Specificity Calculator

Enter a CSS selector to see its specificity score broken down by ID, class, and element counts.

0IDs
0Classes/attrs/pseudo
0Elements
0,0,0Specificity

When two CSS rules target the same element with conflicting styles, specificity determines which one wins — and manually calculating a complex selector's specificity by counting IDs, classes, and elements is easy to get wrong.

This tool parses any CSS selector you enter and breaks down its specificity score into the standard three-part format: ID count, class/attribute/pseudo-class count, and element/pseudo-element count.

This is useful for debugging why a CSS rule isn't applying as expected, understanding cascade conflicts in a large stylesheet, or learning how specificity scoring actually works with real selector examples.

Because everything runs locally in your browser, results appear instantly and nothing you type or upload is ever sent to a server.

Bookmark this page if you expect to use this tool regularly — it loads fast and behaves the same way every time, with no account needed.

This kind of task shows up constantly in everyday writing, coding, design, and admin work, which is exactly why a dedicated, focused tool saves so much back-and-forth.

A tool that does one job well, without a cluttered interface or unrelated features competing for attention, tends to be faster to use than a heavier all-in-one app.

If you find yourself needing this conversion or calculation often, keeping this page open in a tab is usually faster than digging through a bigger software suite's menus.

Because there's no sign-up or installation step, you can jump straight from search result to working tool in a couple of seconds.

If you find yourself needing this often, keeping this page open in a tab is usually faster than digging through a bigger software suite's menus.

Frequently asked questions

How is specificity compared between two selectors?

Specificity is compared left to right by category — ID count first, then class count, then element count — with a higher count in an earlier category always winning regardless of later counts.

Does !important affect this calculation?

This calculator computes selector specificity only; !important overrides normal specificity rules entirely and isn't factored into this score.