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:
1 |
header h1, header h2, header h3, |
2 |
main h1, main h2, main h3, |
3 |
aside h1, aside h2, aside h3 { |
4 |
font-family: serif; |
5 |
}
|
That’s quite messy. But using the :is() pseudo class function we can change all that into this:
1 |
:is(header, main, aside) :is(h1, h2, h3) { |
2 |
font-family: serif; |
3 |
}
|
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!
Exploring Creative CSS Hover Effects for Inline Links
CSS Grid vs. Flexbox: Which Should You Use and When?
Quick tip: How to Make Elements Resizable with CSS Resize
Better Focus Styles with CSS Pseudo-Class :focus-visible
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()
By
