CSS: :where() pseudo selector

tl;dr

The :where() pseudo selector - zero specificity - matches against a comma-separated list of selectors.

Example

Compound selectors like ...

Copy.datepicker .prev, .datepicker .next, .datepicker .switch
  padding-bottom: 1rem

ul li, ol li
  list-style-type: none

can be simplified by using the :where() pseudo selector ...

Copy.datepicker :where(.prev, .next, .switch)
  padding-bottom: 1rem

:where(ul, ol) li
  list-style-type: none

Hint

The specificity of :where() is always zero!

If you need or want specificity consider to use the pseudo selector :is().

Forgiving

Each selector within the comma-separated list within the :where() is ignored when invalid.

Copy:where(ul, ol, #5invalid) li
  /* will still select ul li and ol li */

Pseudo Selector vs. CSS Preprocessing

Simplifying selectors with the pseudo selector is similar like CSS preprocssing is handling nested rules, but be aware of the specificity.

Copy/* SASS */
.nav-list, ol,
  li

/* After preprocessing */
.nav-list li, ol li
/*
  .nav-list li => specificity (0,0,1,1)
  ol li => specificity (0,0,0,2)
*/

:where(.nav-list, ol) li
/*
  .nav-list li => specificity (0,0,0,1)
  ol li => specificity (0,0,0,1)
*/

Browser Support