Ive just recently discovered a new simpler way to write dry, readable, and super useful code using the pseudo-class :is(). The pseudo-class :is() is fairly new and has evolved from another pseudo-class call :matches(). The :is() pseudo class is extremely useful in its targeting elements and also changing and organizing code.
How does :is() work?
:is() takes in an argument of a selector list. Having all the selectors in an argument will reduce repetitive code and make your css readability better. Here is an example of not using the pseudo-class :is().
Having nested or chained selectors is very useful and dry. One of the major issues with having chained selectors is creating big chains of selectors that may have one small syntax error will break the whole css rule.
Here we are saying nav :is(h1, p, a), if there is selectors h1, p , or a apply the color blue. This presents itself way cleaner and dryer. We only have to present the parent selector once for this compound selector. If by chance we have a syntax error listing our selectors in the argument such as writhing an h1 like :h1, the error would only affect the invalid selector with the syntax error and still apply the color blue to the other selectors.
Another great use of :is() is using the parent selector as the argument and then child selector over multiple parents.
If for example you have a card that flips you are selecting the whole front and back of card while using the compound selector :hover we can target all a tags.
I hope this helps you on your coding journey to shed some light on writing cleaner and dryer css rules. Happy coding