:has() is a new relational pseudo-class added to CSS, allowing the parent element to be selected based on whether the child element exists. The basic usage is parent:has(child) {style}, such as p:has(img) will select the paragraph containing the image and apply the style. Practical scenarios include: 1. Automatically adjust the style, such as adding an inner margin to the div with links; 2. Exact match, such as adding an icon to the paragraph with external links; 3. Structural style control can be achieved without class or JS. Notes are: 1. Mainstream browsers have supported but Firefox has not been followed up yet; 2. Nested use: has(:has(...)); 3. The selector should be kept concise to avoid performance problems. Alternatives include manually adding class, dynamic judgment using JS, or writing CSS rules based on existing structural features. Reasonable use: has() can reduce JS code and improve maintenance.

:has() is a brand new relational pseudo-class in the CSS selector. It allows developers to select a parent element based on whether an element contains a specific child element. This was previously possible only by JavaScript or structural limitations, but now it can be done directly with pure CSS.

How to use :has() in basic way?

Simply put, the function of :has() is "If this element contains the specified selector, select it." Its syntax looks like this:

 parent:has(child) {
  /* Style*/
}

For example, if you only want to select paragraphs containing <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175147710787127.jpeg" class="lazy" alt="How to use the new :has() relational pseudo-class in CSS Selectors?" > elements, you can write them like this:

 p:has(img) {
  background-color: lightyellow;
}

In this way, all paragraphs containing the picture will be highlighted in the background. No additional class or JS is required, and it is judged directly by the structure.

Practical scenario: Automatically adjust the style according to the content type

:has() is best used to deal with situations where you cannot control the HTML structure, but want to display different styles according to different content. for example:

• Add an icon to the title containing the link
• Container containing videos with borders or shadows
• Style fine-tuning under certain combination structures

For example, you want to add an inner margin to <div> containing <a> link:

 div:has(a) {
  padding: 10px;
}

Or to be more specific, just add a small arrow icon to paragraphs containing external links (with target="_blank" ):

 p:has(a[target="_blank"])::after {
  content: " ?";
}

This approach allows you to flexibly change styles according to the structure without changing HTML.

Notes and compatibility

Currently, mainstream browsers such as Chrome, Edge and Safari have supported :has() , but Firefox is still following up. Therefore, before using it in a production environment, you must confirm the browser coverage of the target user.

In addition, :has() does not support nested use, which means you cannot write it as :has(:has(...)) . Although there are some limitations, it is enough to meet most common needs.

Some tips for using:

• Try to keep the selector inside :has() concise to avoid performance problems
• It can be used with other pseudo-classes, such as :hover:has(...) , but the effect may vary from browser to browser
• Use DevTools more frequently during testing to see if the match is successful

Common Misconceptions and Alternative Solutions

Many people mistakenly think at first :has() can find "descendants" like jQuery, but in fact it is part of the standard CSS selector and has limited functions. If you need more complex logic, you still have to combine it with JS.

If there is no :has() support, common alternatives include:

• Manually add class in HTML
• Use JavaScript to dynamically judge and add styles
• Write more specific CSS rules using existing structural features

Basically that's it. :has() is powerful, but don't abuse it. Using it rationally can help you reduce a lot of JS code and improve maintainability.

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