Free CSS Specificity calculator with clear step-by-step results.
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.
Specificity tuple
(IDs, classes + attributes + pseudo-classes, elements + pseudo-elements)
Comparable score
Score = IDs x 10,000 + classes x 100 + elements
No. The universal selector and combinators such as >, + and ~ contribute nothing. The :not() pseudo-class also adds nothing itself, but its argument does.
Usually not. High specificity makes overrides require even higher specificity, which is how stylesheets end up littered with !important. Prefer flat, class-based selectors.