CSS Specificity Calculator
Reviewed by Hamza Gujjar, Algorithm Architect & Software Developer
Last updated: July 28, 2026CSS Specificity Calculator
Confused why one CSS rule overrides another? This calculator computes selector specificity using the standard notation.
Specificity = (ID Selectors, Class/Attribute/Pseudo-Class Selectors, Element/Pseudo-Element Selectors)
Example
A selector with 1 ID, 2 classes, 3 elements:
Specificity: (1,2,3) = 10203
Why Specificity Compares Column by Column
CSS specificity is compared column by column from left to right - IDs first, then classes, then elements - rather than as a single combined number. One additional ID selector always outweighs any number of class or element selectors, no matter how many.
Why the Tuple Notation Matters
This three-part tuple notation is the technically correct way to compare specificity - collapsing it into a single weighted number (as this calculator does for convenience) works for quick comparison, but the underlying rule is always "compare IDs first, then classes, then elements," never a simple sum.