CSS :where & :is Pseudo-Class Functions

Help Shorten your CSS Selectors With :where() & :is()

Published in

JS Now

2 min readApr 7, 2021

What is :is & :where?

:is() and :where() are both pseudo-class functions that can help shorten and stop repetition in creating your selectors. They both take an array of arguments of selectors (ids, classes, tags, etc…) and selects any element that can be selected in that list.

This may not make much sense on how this can help us write shorter selectors so let's try using :where() and :is().

How to use :is & :where?

:where() can help us turn something like this

.btn span > a:hover,
#header span > a:hover,
#footer span > a:hover { 
  ...
}

into something like this

:where(.btn, #header, #footer) span > a:hover { 
  ... 
}

and :is() can help make that same example into this

is(.btn, #header, #footer) span > a:hover { 
  ... 
}

What is the difference between :is & :where?

:where() and :is() both look and function identically but there is one difference to remember between them, that they have different specificities. :where() is simple and always has a specificity of 0 while :is() has the specificity of the strongest/most specific selector.

What is CSS specificity (briefly)?

Specificity in CSS there are four levels of the specificity hierarchy in CSS. each of these levels or categories have a different score we can calculate the specificity of a selector by adding up all the scores together.

Whichever selector has the greatest number will have there styles applied to that element that's why sometimes when you write CSS your styles will not be applied and will show as crossed out in the dev tools.

Specificity hierarchy scores

IDs — Specificity score of 100
Inline styles — Specificity score of 1000
elements & pseudo-classes — Specificity score of 1
Classes, pseudo-classes & attributes — Specificity score of 10

For example

button.btn {
  color: red;
}.btn {
  color: green;
}

.btn = 10

button.btn = 1 + 10 = 11

If we put the .btn class on a <button> tag the text would be red because the button.btn selector scores higher than the .btn selector.

As you can see there are pseudo-classes in two of the different levels of specificity that's because different pseudo-classes can have different specificities depending on which pseudo-classes you use and even how you use them.