Is() this where() the magic happens?
Have you started using :is() and :where() yet? If not, let me try to convince you, because these two selectors can seriously make our lives easier. Ever written something like this?
main h1,
main h2,
main h3,
main h4,
section h1,
section h2,
section h3,
section h4 {
color: hotpink;
}
/* Now you can write it like this */
:where(main, section) :is(h1, h2, h3, h4) {
color: hotpink;
}Here’s another cool thing. When you write a list of selectors and the browser doesn’t understand just one of them, the entire list becomes invalid, meaning your styles get ignored But with :is() (and :where()), you don’t have to worry! If a selector inside it fails, the rest still works.
/* This heading won’t be pretty pink */
h1:befoooore,
h1.heading {
color: hotpink;
}
/* But this will! */
h1:is(:befoooore, .heading) {
color: hotpink;
}Convinced yet?
