:is() and :where() are powerful and syntactical CSS pseudo-classes that simplify selector writing and solve specificity problems. 1. :is() can group multiple selectors, reduce duplicate code and maintain original specificity, and is suitable for scenarios where readability and clear structure are required; 2. :where() syntax is similar to the function, but its specificity is always zero, which is very suitable for setting default styles that can be easily overwritten, and is often used in designing systems or component libraries; 3. Both support complex selectors and nested structures to improve code maintainability; 4. The browser supports well, modern browsers are widely compatible, and the old environment can be gradually enhanced. Proper use of these two pseudo-classes makes CSS more flexible, robust and easy to scale.

CSS has quietly gotten a lot more powerful — and a bit more elegant — with the introduction of the :is() and :where() pseudo-classes. These aren't just syntactic sugar; they solve real pain points in writing and maintaining CSS selectors. If you've ever found yourself repeating long selector lists or struggle with specific issues, these two pseudo-classes are here to help.

Let's break down what they do, how they're different, and why you'll want to start using them.

What :is() Does (and Why It's Useful)

:is() is a CSS pseudo-class that takes a selector list and matches any element that fits at least one of the selectors inside it. Think of it as a way to group selectors without repeating the same pattern over and over.

Before :is() , you might write something like this:

 .card:hover,
.sidebar:hover,
.nav-link:hover,
.modal-header:hover {
  opacity: 0.8;
}

That's repetitive and hard to maintain. With :is() , you can simplify it:

 :is(.card, .sidebar, .nav-link, .modal-header):hover {
  opacity: 0.8;
}

This is cleaner, easier to read, and much easier to update. Just add or remove a class from the list inside :is() .

It also works with more complex selectors:

 :is(header, main, footer) h1 {
  font-size: 2rem;
}

This applies the style to h1 elements inside header , main , or footer .

Key benefit : :is() follows normal specific rules — the specification is determined by the most specific selector in the list. So if one of the items in :is() is #id , the whole selector gets high specific.

How :where() Is Different (and When to Use It)

:where() looks and works almost exactly like :is() — it also takes a list of selectors and matches any that apply. But here's the critical difference :

:where() always has zero specificity .

That means no matter what you put inside :where() , it won't add any specific weight to the selector.

This is incredibly useful for default styles or reset/utility patterns , where you want to define base styles that are easy to override later.

For example, a UI library might set default button styles:

 :where(button, [role="button"], .btn) {
  padding: 0.5em 1em;
  border: 1px solid #ccc;
  background: #f0f0f0;
  border-radius: 4px;
}

Because :where() has zero specificity, a simple class rule later in the CSS can easily override it:

 .primary-button {
  background: blue;
  color: white;
}

Without :where() , you'd often need to use !important or match high specification (like button.btn.primary ), which gets messy.

Use :where() when you want flexible, override-friendly styles — especially in design systems or component libraries.

Practical Examples and Real-World Use Cases

1. Simplifying Nested Hover States

You want any direct child of a container to respond to hover:

 .container :is(.card, .item, .post):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

Clean and scalable.

2. Resetting Styles Without Fighting Specificity

Use :where() in a reset or base layer:

 :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

Now you can style a specific list later without worrying about being overridden by reset rules.

3. Responsive Utility Classes

Combine with utility-first approaches:

 :where(.md\\:hover:hover) {
  /* Only apply when .md:hover is used, but won't fight other styles */
}

Note: You need to escape the colon with \\: in class names.

Browser Support and Compatibility

Both :is() and :where() are widely supported in modern browsers:

• :is() — Supported in Chrome 88, Firefox 78, Safari 13.4
• :where() — Chrome 88, Firefox 78, Safari 14.1

For older browsers, you may need to stick with traditional selectors or use build tools that can expand these (though no reliable autoprefixer exists yet for :is() / :where() ).

If you're targeting older environments, consider using them progressively — they fail silently, so fallbacks can be provided.

Summary: :is() vs :where()

Use :is() when you want cleaner, more maintained CSS without changing how specific works.

Use :where() when you want to set defaults that won't get in the way later.

Both make CSS more expressive and less fragile. And honestly, once you start using them, you'll wonder how you lived without them.

Basically — they're small features with big impact.

The above is the detailed content of Exploring the new CSS :is() and :where() Pseudo-classes. For more information, please follow other related articles on the PHP Chinese website!