Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Super Short CSS Selectors With :is() and :where()

Read Time: 2 mins

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:

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

This selector effectively says “if the parent element is a header, main, or an aside, and the element we’re targeting is an h1, h2, or h3, then apply the following rules”

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!

Resources

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.