Make Long CSS Selectors Short With is() And where()

In this video you’ll learn how to simplify your CSS code, turning long verbose selectors into something much more efficient with the :is() and :where() pseudo-classes.

For example, let’s say you use the following selectors to target a bunch of heading elements on the page and make them all serif:

header h1, header h2, header h3,
main h1, main h2, main h3,
aside h1, aside h2, aside h3 {
    font-family: serif;
}

That’s quite messy. But using the :is() pseudo class function we can change all that into this:

:is(header, main, aside) :is(h1, h2, h3) {
    font-family: serif;
}

.That’s just one example. Check out the video to see more, along with explanations of how :is() works, and how it goes hand in hand with the :where() pseudo class too!