CSS Specificity Calculator
Enter one selector per line to see its (ID, CLASS, TYPE) specificity and a comparison figure. Nothing is uploaded — parsing is local.
CSS Specificity
When two CSS rules set the same property on the same element, the browser decides by specificity. Counting it by hand is easy to get wrong, especially with :is(), :not() and :where(). This page applies the CSS Selectors Level 4 model and shows the (ID, CLASS, TYPE) triple for each selector.
The rules this follows
- An ID counts in the first column.
- Classes, attributes and pseudo-classes count in the second.
- Types and pseudo-elements count in the third.
:where()contributes zero;:is()and:not()take the most specific argument.
Frequently asked questions
What is CSS specificity?
Specificity is the weight of a CSS selector, counted as three numbers — IDs, classes/attributes/pseudo-classes, and types/pseudo-elements. The higher-weight rule wins when two rules set the same property.
How are the three numbers counted?
As an (ID, CLASS, TYPE) triple, following the CSS Selectors Level 4 model. The decimal figure shown is a simple comparison aid, not the spec's own notation.
How is :where() treated?
:where() always contributes zero to specificity, matching the specification.
How are :is() and :not() treated?
They take the specificity of the most specific selector in their argument list.
What if a selector cannot be parsed?
That line is flagged as unparsable instead of breaking the tool; the other lines still work.
Why is a type selector not counted?
Element names are counted as types; the universal selector * counts as nothing.
Related: JSON formatter, XML formatter, browse every browser-only tool on the all tools page.