Specificity
When multiple CSS rules match the same element, specificity decides which one applies. Each selector type has a weight:
Specificity Hierarchy
| Level | Examples | Weight |
|---|---|---|
| Inline styles | style="..." |
1,0,0,0 |
| IDs | #header |
0,1,0,0 |
| Classes, attributes, pseudo-classes | .class, [type], :hover |
0,0,1,0 |
| Elements, pseudo-elements | div, ::before |
0,0,0,1 |
Demo: Specificity Battle
HTML
<div id="box" class="highlight" style="color: #7c3aed;">
Which color wins?
</div> CSS
div { color: #64748b; }
.highlight { color: #f59e0b; }
#box { color: #059669; }
Live Output Window
Inline styles win - but avoid them. Use classes for clean, maintainable specificity.
Calculating Specificity
p → 0,0,0,1
.highlight → 0,0,1,0
#header → 0,1,0,0
#header p → 0,1,0,1!important
!important overrides specificity entirely. Use it sparingly:
Demo: !important Example
HTML
<p class="override">This is important!</p> CSS
p { color: #64748b !important; }
.override { color: #ef4444; } /* loses to !important */
Live Output Window