CSS Specificity
When multiple rules target the same element, the browser uses specificity to decide which declarations win. Higher specificity wins; equal specificity defers to source order.
CSS
Beginner
3 min read
What Is CSS Specificity?
Example
p { color: black; } /* specificity 0-0-1 */
.intro { color: blue; } /* specificity 0-1-0 — wins */
#hero { color: red; } /* specificity 1-0-0 — wins over both */
/* On <p class="intro" id="hero"> → color: red */ Pro Tip
Specificity is not about "which rule comes last" — it is about which selector is most precise.