typestar

Specificity in CSS

When two rules set the same property, the more specific selector wins — and the count is not close.

/* 0,0,1 */
a { color: #2b6cb0; }

/* 0,1,1 -- beats the one above */
a.quiet { color: #64748b; }

/* 0,2,1 */
nav a.quiet { color: #0f172a; }

/* 1,0,0 -- beats all three */
#footer-link { color: #94a3b8; }

/* :where() adds nothing, so this stays at 0,0,1 */
:where(nav, aside) a { text-decoration: underline; }

How it works

  1. One id beats any number of classes; one class beats any number of tags.
  2. Read a selector as three numbers: ids, classes, elements.
  3. The last rule wins only when the specificity is a tie.

Keywords and builtins used here

The run, in numbers

Lines
14
Characters to type
313
Tokens
53
Three-star pace
70 tpm

At the three-star pace of 70 tokens a minute, this run takes about 45 seconds.

Type this snippet

Step 1 of 3 in The cascade, step 7 of 26 in Selectors & the box model.

← Previous Next →