CSS Specificity

Specificity

When multiple CSS rules match the same element, specificity decides which one applies. Each selector type has a weight:

Specificity Hierarchy

<div id="box" class="highlight" style="color: #7c3aed;">
Which color wins?
</div>

div { color: #64748b; }
.highlight { color: #f59e0b; }
#box { color: #059669; }

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:

<p class="override">This is important!</p>

p { color: #64748b !important; }
.override { color: #ef4444; } /* loses to !important */