This article explores the CSS :has() selector, a powerful tool for selecting elements based on their content. While relatively new, its support is growing across major browsers (Safari 15.4 , Chromium 105 , and behind a flag in Firefox).
The :has() pseudo-class styles the target element—the element to which it's attached—if specific conditions within its parentheses are met. This is similar to other pseudo-classes like :hover or :active. Unlike those, however, :has() accepts a list of relative selectors, enabling complex selection criteria.
For instance, article:has(img) styles any <article></article> element containing an <img src="https://img.php.cn/upload/article/000/000/000/173907547642572.jpg" alt="An Introduction to the :has() Selector in CSS ">
To target only direct children, use the child combinator: article:has(> img)<img src="https://img.php.cn/upload/article/000/000/000/173907547642572.jpg" alt="An Introduction to the :has() Selector in CSS ">:has()
:has(#id, p, .class)To target only direct children, use the child combinator:
is determined by the most specific selector within its parentheses (e.g., :has() inherits the specificity of an ID selector).h1:has( h2)
<h1></h1>Sibling selectors can also be used with <h2></h2>. ~ styles an ul:has(~ p) element only if it's directly followed by an <ul></ul> element. The general sibling combinator (<p></p>) allows for broader sibling selection. For example,
if it has a 
:has()article:has(> img:first-child):has(h1 h2)<article></article>
<img src="https://img.php.cn/upload/article/000/000/000/173907548383844.jpg" alt="An Introduction to the :has() Selector in CSS "> selectors can be chained to create AND conditions. For example,
only if it has an 
A CodePen demo showcasing these examples is available. This article is an excerpt from Unleashing the Power of CSS: Advanced Techniques for Responsive User Interfaces, available on SitePoint Premium.
Frequently Asked Questions (FAQs) about CSS :has Selector (This section remains largely unchanged, as it accurately reflects the historical and current browser support for the selector.)
The CSS :has() selector is a powerful tool allowing you to select an element based on its children. It's a relational pseudo-class, meaning the selection depends on the relationship between elements.
Browser support for :has() is improving but isn't yet universal. Check sites like Can I Use for the most up-to-date information.
While native browser support is growing, you can use :has() with jQuery for broader compatibility. The syntax is very similar to the CSS version.
:has() is unique in its relational nature; it selects based on the presence of child elements, unlike selectors that focus solely on attributes or position.
Alternatives include JavaScript or more complex combinations of existing CSS selectors, but these often lack the elegance and conciseness of :has().
Initially, performance concerns regarding rendering speed hindered widespread adoption. However, browser support is improving as these concerns are addressed.
Yes, but only in browsers that support it.
The basic syntax is :has(selector).
Yes, :has() can be combined with other selectors for more complex selections.
The future looks bright; :has() is becoming increasingly prevalent as browser support improves.
The above is the detailed content of An Introduction to the :has() Selector in CSS. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
