38. Specificity Calculation: ID, Class, Type

Specificity is a score given to a CSS selector that determines how 'powerful' it is. A higher specificity score means the rule will override rules with lower scores.

The Specificity Hierarchy (A, B, C, D)

The browser calculates the score based on the number of each type of selector present:

• A: Inline Styles (Highest, worth 1000 points - use sparingly).
• B: ID Selectors (#id) (Worth 100 points).
• C: Class, Attribute, and Pseudo-Class Selectors (.class, [attr], :hover) (Worth 10 points).
• D: Type and Pseudo-Element Selectors (p, h1, ::before) (Worth 1 point).

Example Conflict

css /* Rule 1: Score 1 (0,0,0,1) */ p { color: red; }

/* Rule 2: Score 10 (0,0,1,0) */ .text-green { color: green; }

/* Applied to:

Hello

Specificity is not a simple arithmetic total. You can have 100 class selectors (1000 points in the C column) but a single ID selector (100 in the B column) will still win.