📡 You're offline — showing cached content
New version available!
Quick Access
Tutorials CSS Mastery Specificity and Cascade

Specificity and Cascade

5 min read
The cascade resolves style conflicts. Specificity determines which rule wins: IDs beat classes, classes beat elements. Rules appearing later win ties. !important overrides everything but makes maintenance much harder.

CSS Specificity

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

/* Specificity: (inline, id, class, element) */
* {}                 /* 0,0,0,0 */
p {}                 /* 0,0,0,1 */
.card {}             /* 0,0,1,0 */
#header {}           /* 0,1,0,0 */
style=""             /* 1,0,0,0 */
!important           /* overrides all */

/* Higher number wins */
/* Same specificity — last rule wins */