CSS Specificity
Free CSS Specificity calculator with clear step-by-step results.
About CSS Specificity
CSS specificity is a three-part tuple compared left to right, not a single number - which is why a thousand class selectors never outrank one ID. The comparable score here uses a wide base so ordinary selectors sort correctly, and the cascade tier reminds you that inline styles and !important sit outside specificity altogether.
Formulas
Specificity tuple
(IDs, classes + attributes + pseudo-classes, elements + pseudo-elements)
Comparable score
Score = IDs x 10,000 + classes x 100 + elements
Worked example
With the default values below, CSS Specificity returns Specificity (ID-class-element) of 1-2-3. Change any input above and every figure here is recalculated in your browser.
Inputs used
- ID selectorsaccepts 0–50
- 1
- Class, attribute and pseudo-class selectorsaccepts 0–50
- 2
- Element and pseudo-element selectorsaccepts 0–50
- 3
- Declared as an inline style attribute
- No
- Marked !important
- No
Results
- Specificity (ID-class-element)
- 1-2-3
- Comparable score
- 10,203
- Cascade origin and importance
- Normal author declaration
- Selector components counted
- 6
Step by step
- 1Values used
- 2Specificity tuple
- 3Comparable score
- 4Specificity (ID-class-element)= 1-2-3
- 5Comparable score= 10,203
- 6Cascade origin and importance= Normal author declaration
- 7Selector components counted= 6
Assumptions and limits
- The result is derived only from the 5 inputs listed above. Anything not among them is not part of the calculation.
- In particular, this calculator does not take inflation, tax, fees or charges or compounding frequency into account.
- Figures are rounded for display to whole numbers, so totals built from several rounded parts can differ slightly from the unrounded arithmetic.
How these calculators are built and tested is described on the Methodology page. If a figure looks wrong, please report it.
Frequently Asked Questions
Does the universal selector add specificity?
No. The universal selector and combinators such as >, + and ~ contribute nothing. The :not() pseudo-class also adds nothing itself, but its argument does.
Is a high score good practice?
Usually not. High specificity makes overrides require even higher specificity, which is how stylesheets end up littered with !important. Prefer flat, class-based selectors.