How to use the :where CSS selector to solve specificity problems ↓

As a general rule, I try to keep CSS selector specificity low. It simplifies code maintenance. In this example, you might use: '.cd-calendar-date:hover:not(.cd-calendar-date--selected) {}' to achieve the same result, but it creates high specificity, leading to potential override issues. The :where selector is handy because it lowers the specificity.

Honestly the :where operator is such an underrated operator, I am surprised that more people aren't using it. Lets you be very specific in terms of what you can style, very useful for use-cases like above!

💯

you're saving an entire generation from @tailwindcss

smart way of using :where, thanks for the tip

Great advice

Nice but hard to support, unless you comment this shit 😀 Prefer to have .active class

You’d still need the .active class (.cd-calendar-date—selected in this example). The :where operator only saves you some code because you wouldn’t need to override .class:hover with .active:hover

I rather .cd-calendar-date--selected, .cd-calendar-date--selected:hover {}

You can do that, but you’d need to override the .cd-calendar-date:hover style.