:is | CSS Selectors & Pseudo-classes

Matches any selector in its argument list. Useful for grouping related selectors.

Quick example

button:is(.primary, .secondary, .tertiary) { padding: 0.5rem 1rem; }

Examples

Group related button selectors

button:is(.primary, .secondary, .tertiary) {
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

/* Without :is, this would need repeated selectors */

Use :is() to reduce repetition when styling multiple related button types with the same rules.

Simplify nested selectors

.nav :is(a, button):hover {
  background-color: #f0f0f0;
}

/* Matches a or button inside .nav on hover */

Combines multiple selectors into one, making CSS more readable than listing each selector separately.

Style form inputs consistently

input:is([type="email"], [type="password"], [type="text"]) {
  border: 1px solid #ccc;
  padding: 8px;
}

Group input types together without repeating the input selector for each type.

:is Browser Support

Widely available Since 2021 88% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2021.

Safe to use without fallbacks.

View on caniuse.com → View on MDN → View on webstatus.dev → View spec → Learn more about Baseline →

Common pitfalls

:is() takes the highest specificity

:is(a, div) has the same specificity as the most specific selector inside it. If one selector inside :is() has high specificity, the entire :is() will too. This can override styles unexpectedly.

Not all selectors are valid inside :is()

Combinators like + (adjacent sibling) and > (child) cannot be used directly inside :is(). Only simple selectors (element, class, attribute, pseudo-class) work.

Browser support for pseudo-elements

While :is() works in all modern browsers, pseudo-elements like ::before cannot be used inside :is(). Use the element selector instead.