Day 14: the difference between :is() and :where()

posted on October 13., 2022

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

---

There's an important difference between :is() and :where().

Let's take the following example. We have two buttons and we use :where() on the first button to apply a background color and :is() on the second button.

<button class="button1">where</button>
<button class="button2">is</button>

button:where(.button1) {
  background-color: rebeccapurple;
}

button:is(.button2) {
  background-color: rebeccapurple;
}

Visually the buttons are identical, but the difference is the specificity of the selector.

The button with the :where() pseudo-class has the same specificity as a simple tag selector (for example button {}) because the specificity of :where() is 0. The arguments in :where() don't add to the specificity of the selector.

The button with the :is() pseudo-class has the same specificty as a combined selector (for example button.button2 {}) because :is() takes on the specificity of the most specific selector in its arguments.

/* Specificity: 0 0 1 (0 ids, 0 classes, 1 tag) */
button:where(.button1) {
  background-color: rebeccapurple;
}

/* Specificity: 0 1 1 */
button:is(.button2) {
  background-color: rebeccapurple;
}

/* Specificity: 0 0 1 
  -> Same as the first button. Overwrites rebeccapurple.
  -> Lower than the second button. Doesn't overwrite rebeccapurple.
*/
button {
  background-color: salmon;
}

/* Specificity: 0 1 0
  -> Still lower than the second button. Doesn't overwrite rebeccapurple.
*/
.button2 {
  background-color: green;
}

See on CodePen.

Further reading