Specificity

Reference

Read Specificity on Web.Dev

Specificity  |  web.devweb.dev

---

Specificity Hierarchy (lowest to highest)

1. Universal selector (*) - 0 points

2. Element/tag selectors (div, p) - 1 point

3. Class selectors (.button), attribute selectors ([type="text"]), pseudo-classes (:hover) - 10 points

4. ID selectors (#header) - 100 points

5. Inline styles (style="color: red") - 1000 points

6. !important - overrides everything (use sparingly)

How Scoring Works

Specificity is calculated by counting selectors in each category:

/* (0, 0, 1) = 1 point */
p { color: black; }

/* (0, 1, 0) = 10 points - wins */
.text { color: blue; }

/* (0, 1, 1) = 11 points - wins */
p.text { color: green; }

/* (1, 0, 0) = 100 points - wins */
#content { color: red; }

/* (1, 1, 2) = 112 points - wins */
#content div.text p { color: purple; }

Key Rules

• When specificity is equal, the last rule in the stylesheet wins

• Specificity only matters when multiple rules target the same element

• Inherited styles have no specificity (they lose to any direct targeting)

• Combinators (>, +, ~) don't add specificity

Best Practice

Keep specificity low and consistent to make your CSS easier to maintain. Avoid relying heavily on IDs or !important.