How CSS specificity works

Follow the cascade order

A winning declaration depends on origin and importance, cascade layer, specificity, scope proximity, and source order. Specificity matters only after earlier cascade criteria tie.

Compare selector weight

IDs outweigh classes, attributes, and pseudo-classes; those outweigh type selectors and pseudo-elements. Inline styles have their own high priority.

/* 0-0-1 */
p { color: navy; }
/* 0-1-0 */
.intro { color: teal; }
/* 1-0-0 */
#summary { color: purple; }

Use source order for ties

When equally specific rules apply in the same cascade context, the later declaration wins.

.notice { color: navy; }
.notice { color: darkred; } /* wins */

Keep conflicts simple

• Prefer classes with low, consistent specificity
• Place component variants after their base rules
• Use cascade layers to order broad style groups when useful
• Reserve !important for deliberate exceptions, not routine fixes