CSS Specificity
Specificity is a weight assigned to CSS selectors. Inline styles (1000) beat IDs (100) beat classes (10) beat elements (1).
The selector with the highest specificity wins regardless of source order.
HTML
Intermediate
5 min read
CSS Specificity Rules
Example
/* Specificity: 0-0-1 (element) */
p { color: blue; }
/* Specificity: 0-1-0 (class) — wins over element */
.text { color: green; }
/* Specificity: 1-0-0 (ID) — wins over class */
#intro { color: red; } Pro Tip
Keep specificity low — it is easier to override a class than an ID selector.