CSS Specificity · Astro Tech Blog

Web Development / Frontend / CSS

Specificity

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

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.

p           → 0,0,0,1
.highlight  → 0,0,1,0
#header     → 0,1,0,0
#header p   → 0,1,0,1

!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