Mastering CSS :has() Selector: Unlock New Styling Possibilities

Unlocking the Power of CSS :has() Selector

The CSS :has() selector is a game-changer in the world of web development. It allows us to style an element based on its descendants or succeeding elements, opening up a plethora of possibilities that were previously difficult to achieve. In this article, we’ll delve into the world of :has() and explore its syntax, usage, and practical applications.

When to Use CSS :has()

Traditionally, when writing CSS rules, we target HTML elements from right to left. However, there are scenarios where we need to target an element based on its content or succeeding elements. For instance, we might want to style a <section> element that contains a <p> element. This is where :has() comes in handy.

Browser Compatibility

Before we dive deeper, let’s take a look at browser compatibility. Currently, the CSS :has() selector is only enabled by default on the latest Safari browser. However, it can be enabled via the experimental features flag in the latest Chrome versions.

Enabling CSS :has() Support in Chrome

To enable :has() support in Chrome, follow these steps:

1. Open Chrome and type chrome://flags/ in the address bar.
2. Search for “experimental Web Platform features” and enable the flag.
3. Relaunch the browser to activate the feature.

CSS :has() Syntax

The :has() pseudo-class accepts a CSS selector list as arguments. The syntax is as follows:
css
:has(selector)

The selector can be any valid CSS selector.

CSS :has() Selector Examples

Let’s get familiar with how to use :has() with some examples.

• Targeting a <section> element that contains a <p> element:
  css
section:has(p) {
color: red;
}

• Targeting a <h2> element that has a <p> element as a sibling:
  css
h2:has(+ p) {
font-size: 24px;
}

  Passing Other CSS Combinator Selectors as Arguments

We can also pass other CSS combinator selectors as arguments to :has(). For example:

• Targeting a <li> element that has a <p> element followed by another <p> element:
  css
li:has(p + p) {
background-color: #f0f0f0;
}

  Combining CSS :has() with :not() Pseudo-Class

We can also combine :has() with the :not() pseudo-class to target elements that do not match certain selectors. For example:

• Targeting <li> elements that do not contain any <p> elements:
  css
li:not(:has(p)) {
display: none;
}

  Practical Applications of CSS :has()

Now that we’ve explored the syntax and usage of :has(), let’s take a look at some practical applications.

• Styling a Parent with a Specific Child: We can use :has() to style a parent element based on its child elements. For example, we can style a <section> element that contains a <p> element with a specific class.
• Styling Previous Siblings: We can use :has() to style previous siblings based on their succeeding elements. For example, we can style a <label> element based on the validity of its corresponding <input> element.

These are just a few examples of the many possibilities offered by the CSS :has() selector. As browser support improves, we can expect to see more widespread adoption of this powerful tool.