Super Short CSS Selectors 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!

CSS Fan? Check Out These Videos!

If we haven’t met before my name’s Adi and I’m a web designer. It’s my goal with these videos to help you become a better web designer and developer!

• 
  CSS
  Exploring Creative CSS Hover Effects for Inline Links
  Adi Purdila

• 
  CSS Grid Layout
  CSS Grid vs. Flexbox: Which Should You Use and When?
  Anna Monus

• 
  CSS
  Quick tip: How to Make Elements Resizable with CSS Resize
  Adi Purdila

• 
  CSS
  Better Focus Styles with CSS Pseudo-Class :focus-visible
  Adi Purdila

Resources

• :is() (:matches(), :any()) – CSS: Cascading Style Sheets | MDN
• :where() – CSS: Cascading Style Sheets | MDN
• Understanding CSS Specificity
• :is() CSS pseudo-class | Can I use… Support tables for HTML5, CSS3, etc
• CSS selector: :where() | Can I use… Support tables for HTML5, CSS3, etc
• Making Long Selectors Short with :is() and :where()