Specificity Calculator
Paste a selector list and read the id, class and element counts plus the resulting weight.
Calculate specificity
Paste a selector list, then press Calculate.
Selectors: — · Highest weight: —
How to use the Specificity Calculator
- Paste one selector or a comma separated selector list into the box.
- Read the id, class and element counts together with the a-b-c value for each part.
- Check the notes panel for inline styles or important flags that override the weight.
Features
- Scores every part of a comma separated selector list
- Separate id, class, attribute and element counts
- Flags inline styles and important declarations
- Table output with the a-b-c value and a numeric weight
Advertisement
Frequently Asked Questions
Common questions about the free online specificity calculator.
Each selector is counted in three groups: ids, then classes, attributes and pseudo-classes,
then elements and pseudo-elements.
The three numbers are the id count, the class count and the element count, written in that
order and often shown as a single score.
Yes. Attribute selectors and pseudo-classes such as hover or nth-child add to the class
column, never to the id column.
The universal selector adds nothing at all. It has zero specificity, so it never wins a
conflict on its own.
An inline style attribute beats every selector, so the calculator lists it separately instead
of adding it to the counts.
An important declaration outranks all normal declarations. Between two important rules,
specificity decides the winner again.
Yes. When two selectors have identical specificity, the one written later in the stylesheet
wins the conflict.
Because it is chained with other selectors. Each additional id, class or element in the chain
raises the total weight.
Yes. It is completely free, runs locally in your browser and never sends your selectors
anywhere.
Last updated: October 10, 2026