:is() and :where() in CSS

The same grouping, and they differ on exactly one thing: what they do to specificity.

/* one rule instead of six */
.prose :is(h1, h2, h3) {
  text-wrap: balance;
  margin-block: 1.5em 0.5em;
}

/* zero specificity, so a component can override it with one class */
:where(.prose) :where(a) {
  color: #2b6cb0;
  text-decoration-thickness: 1px;
}

.prose a.button { color: white; }

/* :not() takes a list too */
button:not(.link, .ghost) { border: 1px solid currentColor; }

How it works

1. :is() takes the specificity of its most specific argument.
2. :where() always counts as zero, which makes it perfect for defaults.
3. Both stop a long selector list from repeating its own prefix.

Keywords and builtins used here

• border
• button
• color
• em
• ghost
• link
• prose
• px

The run, in numbers

Lines

16

Characters to type

379

Tokens

79

Three-star pace

85 tpm

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

Type this snippet

Step 2 of 3 in Selectors that ask questions, step 9 of 21 in Responsive & modern CSS.

← Previous Next →