CSS Specificity: The Complete Mental Model | DevPrep

CSS Specificity: The Complete Mental Model | DevPrep

/* (0,0,0,1) — one element */
p { color: red; }

/* (0,0,1,0) — one class */
.text { color: blue; }

/* (0,0,1,1) — one class + one element */
p.text { color: green; }

/* (0,1,0,0) — one ID */
#main { color: purple; }

/* (0,1,1,1) — one ID + one class + one element */
div#main.container { color: orange; }

/* Winner: orange (highest specificity) */

/* :is() takes the highest specificity of its arguments */
:is(#header, .nav) a { }  /* specificity of #header: (0,1,0,1) */

/* :where() has ZERO specificity — always */
:where(#header, .nav) a { }  /* specificity: (0,0,0,1) */

/* :where() is perfect for resets and defaults */
:where(h1, h2, h3) { margin: 0; }  /* easily overridable */

@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; }
}

@layer components {
  .btn { background: blue; } /* Always beats reset regardless of specificity */
}

@layer utilities {
  .bg-red { background: red; } /* Always beats components */
}