CSS: :is() pseudo selector

tl;dr

The :is() pseudo selector - specificity of its most specific argument - 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 :is() pseudo selector ...

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

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

Hint

The specificity of :is() is equals to its most specific argument!

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

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)
*/

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

Forgiving

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

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

Browser Support