← All tutorials

GoCareerGo Tutorials

CSS Tutorial

Selectors, box model, Flexbox, Grid, animation and responsive design.

CSS Specificity

When multiple rules target the same element, specificity decides which one wins.

Inline styles beat everything (specificity aside, but practically highest)
IDs (#id) beat classes
Classes, attributes and pseudo-classes (.class, [attr], :hover) beat elements
Elements and pseudo-elements (div, ::before) have the lowest specificity
!important overrides normal specificity rules — use sparingly

/* Specificity: 0,1,1,1 vs 0,0,1,0 — the first wins */
#nav .link.active { color: teal; }
.link { color: gray; }