CSS Selector: is any of (is, where)

:is() — select any of

:is(s1, s2, etc)

lets you group selectors. It matches an element if any of the selectors s1, s2 etc match.

meaning is basically the same as just s1, s2, etc

:is(h1, h2, h3, h4, h5, h6) {
 color: red;
}

/* above is same as the following */

h1, h2, h3, h4, h5, h6 {
 color: red;
}

note: :is() was named :matches()

Example 2: Complex combinations

/* Style links that are either in nav or are buttons */
:is(nav a, button.link, .card a) {
  color: royalblue;
  text-decoration: underline;
}

Specificity

:is() takes the highest specificity of the selectors inside it.

• CSS: Specificity

:is(#header, .nav) a { }   /* specificity = 0,1,0 (from #header) */

:where() — select any of, but 0 specificity

:where(s1, s2, etc)

same as the :is but contributes zero specificity (0,0,0).

• CSS: Specificity

This is very useful for writing non-intrusive base styles that are easy to override.

/* These won't block more specific rules */
:where(a) {
 color: blue;
}

/* This will override the :where() rule easily */
.nav a {
 color: red;
}

Real-world use case: Component libraries

/* Library styles */
:where(.button) {
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
}

/* User can easily override */
.my-custom-button {
  padding: 1rem 2rem;   /* overrides without fighting specificity */
}

Key Difference Summary:

Practical Combined Examples

/* Zero-specificity headings in articles */
article :where(h1, h2, h3, h4) {
  scroll-margin-top: 5rem;
}

/* Complex card variations */
.card:is(:has(img), :has(video)) {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

Tips & Best Practices

1. Specificity: Prefer :where() for utility/base layers.
2. Chaining: You can combine them:

   article:has(:is(h2, h3)) :where(p) { ... }

example

.card {
 border: solid 1px grey;
}

.card:has(img) {
 border: solid 1px red;
}

.card:where(:has(h3)) {
 border: solid 1px pink;
}