Retour au cours

Lesson 38: Specificity Calculation: ID, Class, Type

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

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).
SelectorScore (A, B, C, D)Resulting Score
p(0, 0, 0, 1)1
.alert(0, 0, 1, 0)10
p.alert(0, 0, 1, 1)11
#header(0, 1, 0, 0)100
#header .logo(0, 1, 1, 0)110
style="..."(1, 0, 0, 0)1000

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

/ / Result: GREEN wins because 10 > 1 */

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.