:where() :is()

 

:is()

Think about when you want to apply the same styling to multiple elements in your HTML. You’d probably end up with something that looks like this:

.main h1,
.main h2,
.main .heading, {
  line-height: 1.2;
}.nav li,
.nav p {
  padding: 5px 10px;
}

With :is() we can write our CSS in a shorter, quicker, and more elegant way.

.main :is(h1, h2, .heading){
  line-height: 1.2;
}.nav :is(li, p) {
  padding: 5px 10px;
}

Imagine all the many lines you’re saving!
This is very similar to how nesting works with preprocessors such as SCSS.

The pseudo-class function :is() (AKA “Matches Any”) takes a selector list and selects any element that can be selected by one of the selectors in that list.
It can also be chained with other selectors such as :not() , :firstchild() etc.