← All tools

CSS Specificity Calculator

Instantly calculate the specificity of any CSS selector. Compare two selectors to see which wins. Free, client-side, no signup.

Calculate Specificity

Enter a CSS selector above to see its specificity.

Compare Two Selectors
Selector A
VS
Selector B
Click an example to calculate
Specificity Columns Explained
A
Inline Styles
The style="" attribute on an element. Highest specificity weight.
B
ID Selectors
#myId — each ID adds 1 to column B. IDs must be unique per page.
C
Classes, Attributes, Pseudo-classes
.class, [attr], :hover, :nth-child() — each adds 1 to column C.
D
Elements & Pseudo-elements
div, span, ::before, ::after — each adds 1 to column D.

Specificity is compared column by column from left (A) to right (D). A higher value in column A always beats any value in B, C, or D — there is no overflow. The universal selector * and combinators (>, +, ~) contribute zero specificity.

Note: !important overrides all specificity but is not a selector — it's not counted here.

Buy me a coffee