CSS Specificity

Specificity score

Three groups: (A, B, C)

• A — inline styles (style="..."): 1,0,0
• B — ID selectors (#main): 0,1,0 each
• C — class, pseudo-class, attribute (.btn, :hover, [type]): 0,0,1 each
• Tags and pseudo-elements (div, ::before): 0,0,1, counted separately

Examples

#nav .item a:hover  → (0,1,2)  /* ID + class + pseudo-class */
.btn.btn-primary    → (0,0,2)
button              → (0,0,1)
/* The first rule wins */

!important

!important overrides any specificity. Avoid it — makes CSS unpredictable. Only justified for utilities (.hidden { display: none !important; }).

Order when specificity is equal

The rule declared later in the CSS wins.