:is and :where selectors

:is() can be used to remove repetition in selector lists. The specificity is determined by its most specific selector argument.

/* BEFORE */
.embed .save-button:hover,
.attachment .save-button:hover {
  opacity: 1;
}

/* AFTER */
:is(.embed, .attachment) .save-button:hover {
  opacity: 1;
}

where:() can be used similarly, although it does not increase specificity. This can be useful for styles that should be easy to override. Note that it can still be used to remove repetition, similar to the :is() example above.

svg:not([fill]) {
  fill: currentColor;
}

/* less specific */
svg:where(:not([fill])) {
  fill: currentColor;
}

[[css]]