The :has() pseudo-class in CSS allows you to select elements based on their child or descendant elements. 1. It enables conditional styling, such as selecting a link that contains an image. 2. The syntax is selector:has(selector-or-combinator), for example a:has(img). 3. It checks for any matching descendant, not just direct children. 4. It's supported in modern browsers like Chrome and Safari as of late 2023. 5. Practical uses include styling containers based on their content, highlighting links with images, and customizing navigation items. 6. However, browser support is still evolving, performance can be impacted in complex layouts, it doesn't respond dynamically to DOM changes, and it doesn't work with pseudo-elements.

The :has() pseudo-class in CSS is a powerful new relational selector that allows you to target an element based on its child elements or content. Before :has(), CSS couldn’t look inside an element and decide whether to style it based on what was inside — but now it can.

This means you can write selectors like "select a link only if it contains an image" or "style a heading if it's followed by a paragraph."

How Does :has() Work?

:has() works by checking if an element has certain descendants or following siblings. It’s often called a parent selector (though technically, it’s more of a conditional selector).

Here's the basic syntax:

selector:has(selector-or-combinator)

For example:

a:has(img) {
  background-color: yellow;
}

This will apply a yellow background to any <a> tag that contains an <img alt="What is the new :has() relational pseudo-class?" > inside it.

You’re not limited to just direct children — :has() checks for any matching descendant at any depth level.

Some key things to know:

• :has() is supported in modern browsers like Chrome and Safari as of late 2023.
• It can be used with multiple selectors inside the parentheses.
• You can combine it with other CSS selectors for advanced targeting.

Practical Use Cases for :has()

There are many real-world scenarios where :has() makes life easier. Here are a few examples:

Style a container if it contains specific content

Say you want to add padding to a card layout only when it includes a heading:

.card:has(h2) {
  padding-top: 1rem;
}

Highlight links containing images

If you're building a gallery or blog post with inline links and images, this helps visually distinguish those special links:

a:has(> img) {
  border: 2px solid red;
}

Conditional styling for navigation items

You could style a menu item differently if it contains a badge or dropdown indicator:

.nav-item:has(.badge) {
  font-weight: bold;
}

These aren't just theoretical — they help reduce the need for extra JavaScript or complex class structures in HTML.

Things to Watch Out For

While :has() is exciting, there are a few gotchas:

• Browser support: As of early 2024, it’s supported in Chromium-based browsers and Safari Tech Preview. Firefox is working on it. Always check Can I Use.
• Performance impact: Overusing :has() in deeply nested layouts might affect rendering speed. Keep usage focused and targeted.
• Not dynamic in all contexts: It doesn’t respond to DOM changes unless the page re-renders. So it won’t replace JavaScript logic entirely.

Also, remember that :has() currently doesn’t work with pseudo-elements like ::before or ::after.

So yeah, :has() brings something truly new to CSS — the ability to conditionally select elements based on their contents. It opens up a lot of creative possibilities without needing extra classes or scripts.

And while it’s still relatively new, it's already shaping up to be one of those features that we’ll wonder how we lived without.

The above is the detailed content of What is the new :has() relational pseudo-class?. For more information, please follow other related articles on the PHP Chinese website!