CSS advanced selectors such as:is(), :where() and :has() enhance style control capabilities. 1. :is() is used to simplify duplicate selectors. For example::is(h1, h2, p) a can uniformly set the styles of links in different contexts; 2. :where() and :is() have the same syntax but are less specific, and are suitable for defining default styles that are easily overwritten, such as ::where(.theme-dark, .theme-light) button; 3. :has() allows the selection of parent elements based on child elements. For example, article:has(img) can add borders to articles containing images, but attention should be paid to browser compatibility issues. These selectors reduce redundant code and improve layout flexibility.

Advanced CSS selectors like :is() , :where() , and :has() gives developers more control over styling elements based on complex conditions — things that used to require extra classes or JavaScript can now be handled directly in CSS.

Understanding :is() – Simplify Repeated Selectors

:is() (formerly known as :matches() and :any() ) lets you apply the same styles to multiple selectors without repeating yourself. This is super handy when you want to target similar elements nested in different contexts.

For example, if you want links inside headings and paragraphs to look the same, instead of writing:

 h1 a,
h2 a,
pa {
  color: blue;
}

You can simplify it with:

 :is(h1, h2, p) a {
  color: blue;
}

This makes your CSS cleaner and easier to maintain. It also helps avoid mistakes when adding or removing selector variations.

Using :where() – Same Syntax, Lower Specificity

:where() works just like :is() , but with one key difference: it doesn't add specificity. That means styles inside :where() won't override other rules just because of selector strength.

This is useful when you want to apply default styles broadly but still allow them to be easily overridden later.

Example:

 :where(.theme-dark, .theme-light) button {
  border-radius: 8px;
}

Since this uses :where() , another rule targeting .theme-dark button directly will take precedence — helpful for theme switching or layered styling systems.

Leveraging :has() – Parent Selection Based on Children

:has() is the most powerful and unique of these selectors. It allows you to style an element based on its children or descendants — something CSS couldn't do before.

For instance, if you want to add a border to any article that contains an image:

 article:has(img) {
  border: 1px solid #ccc;
}

Or style a link differently if it includes both text and an icon:

 a:has(svg, span) {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

Just keep in mind browser support isn't perfect yet — especially in older browsers — so test carefully if you're using it in production.

These selectors help reduce redundancy, improve readability, and open up new layout possibilities. They don't replace JavaScript entirely, but they definitely cut down on what you need it for.

The above is the detailed content of How do advanced CSS selectors like :is(), :where(), and :has() improve targeting capabilities?. For more information, please follow other related articles on the PHP Chinese website!