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: —
Specificity is written as three counts, ids, then classes, attributes and pseudo-classes, then elements and pseudo-elements. Inline styles and important declarations always win over any selector.

How to use the Specificity Calculator

  1. Paste one selector or a comma separated selector list into the box.
  2. Read the id, class and element counts together with the a-b-c value for each part.
  3. Check the notes panel for inline styles or important flags that override the weight.

Features

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