The Power of :has() in CSS

Fellow developers, let's dive into the exciting world of CSS's :has() pseudo-class! While relatively new, :has() has quickly become a favorite among front-end developers for its ability to precisely control styling based on an element's internal structure. Let's explore its functionality and practical applications.

Understanding :has()

The :has() pseudo-class elegantly styles an element only if it contains specific child elements. Think of it as a conditional style: "If this element contains that, then style this element."

Syntax:

:has(<direct-selector>) {
  /* Styles applied if the direct selector is found within the parent */
}</direct-selector>

Solving a Common Styling Challenge

Previously, styling a parent element based solely on its children's presence required JavaScript. :has() elegantly solves this.

Consider a blog post listing where an <h1></h1> (title) might be followed by an <h2></h2> (subtitle). We might want to visually highlight the <h1></h1> only if an <h2></h2> exists directly after it. Before :has(), this necessitated JavaScript.

The Old (JavaScript) Way:

const h1Elements = document.querySelectorAll('h1');

h1Elements.forEach((h1) => {
  const h2Sibling = h1.nextElementSibling;
  if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
    h1.classList.add('highlight-content');
  }
});

This JavaScript code iterates through <h1></h1> elements, checks for a following <h2></h2>, and adds a class for styling.

The New (CSS) Way:

h1:has(+ h2) {
  color: blue;
}

This concise CSS achieves the same result using :has() and the adjacent sibling combinator ( ). It styles the <h1></h1> blue only if an <h2></h2> immediately follows it.

Practical :has() Examples

Let's explore a couple of scenarios where :has() shines.

Example 1:

HTML:

<h1>Lorem, ipsum dolor.</h1>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>...</p>

<h1>This is a test</h1>
<p>...</p>

CSS:

h1:has(+ h2) {
  color: blue;
}

Only the first <h1></h1> will be blue because it's followed by an <h2></h2>.

Example 2: Styling Images with Captions

Often, we work with images and captions. :has() can enhance image presentation.

HTML:

<figure>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="The Power of :has() in CSS ">
  <figcaption>My Aunt Sally's Doggo</figcaption>
</figure>

CSS:

figure:has(figcaption) {
  background: #c3baba;
  padding: 0.6rem;
  max-width: 50%;
  border-radius: 5px;
}

This styles the <figure></figure> only if it contains a <figcaption></figcaption>.

Browser Support and Community Usage

:has() enjoys broad support in modern browsers (check caniuse.com for detailed browser compatibility information). Community feedback reveals creative uses, including accessibility enhancements.

Important Considerations:

• Specificity: :has() inherits the specificity of its most specific internal selector.
• Browser Compatibility: Failure of :has() will cascade unless used within forgiving selectors like :is() or :where().
• Nesting: :has() cannot be nested within another :has().
• Pseudo-elements: Pseudo-elements are not valid selectors within :has().

Conclusion:

:has() is a powerful addition to the CSS arsenal, enabling elegant and efficient styling previously reliant on JavaScript. By understanding its capabilities and limitations, we can elevate our web development skills and create more robust and maintainable code.

Further Reading:

• Isha Deed's Article on :has()
• CSS-Tricks on :has()
• Chrome Blog Post on :has()
• CSS-Tricks on the :has() Selector

The above is the detailed content of The Power of :has() in CSS. For more information, please follow other related articles on the PHP Chinese website!