Last week, I finally had a reason to use the newish :is() CSS pseudo-class, and wow is it glorious! Today, I want to show you how it can dramatically reduce selector complexity. Let’s dig in! What :is() does The :is() pseudo-class accepts a comma-separated list of selectors, and can be used to group them together. For example, these two selector strings do the same thing… h1, h2, h3, h4, h5, h6 { font-weight: bold; } :is(h1, h2, h3, h4, h5, h6) { font-weight: bold; } You’re probably look at this and thinking…

CSS functions like :is(), :not() and :has() are powerful tools that make it much easier to select elements specifically. We've written before about how ::where…

Learn about the :where() pseudo-class function and show how it can be used in production. See some specific use cases.