Create More Dynamic Styles with :has()

Quick Summary: Uncover the unique capabilities of :has(). This latest CSS relational selector allows us to select parents, siblings, and other distinctive combinations.

The CSS selector :has() is powerful. It lets us select and style parent or ancestor elements. We do this based on the presence of specific descendants. It lets us target one or more siblings or children of the selected ancestor. We can style elements in many unique ways by using different states or positions.

Here’s a quick analogy:

Before :has(): You could say, “Make all the children of this house blue.”

With :has(): You can now say, “If this house has a bicycle inside, paint the front door red.”

How to Use :has()

It’s very simple! The basic structure is as follows:

CSS

parentSelector:has(> childSelector)  {

  /* Styles to apply if the ‘parentSelector’ contains the ‘childSelector’ */

}

Let’s look at how :has() works with combinators.

Combinators are special characters in CSS selectors. They show the relationship between parts of a selector. The main ones you need to know are:

• Space character: Using the space character, the descendant combinator matches a direct or nested child.

• >: The direct child combinator only selects top-level children that are not nested.

• +: The adjacent sibling combinator is a CSS selector. It matches only the next sibling element. It doesn’t match any other siblings that come after the next one.

• ~: The general sibling combinator is a CSS selector. It matches one or more siblings that come after the base selector.

Real-world Examples

• Styling Navigation Links:

  • HTML

<nav>

  <ul>

    <li><a href=“#”>Home</a></li>

    <li><a href=“#”>About</a></li>

    <li><a href=“#”>Products</a> <ul><li>Product One</li></ul> </li> 

    <li><a href=“#”>Contact</a></li>

  </ul>

</nav>

• CSS

nav ul li:has(> ul) {

  background-color: red;

}

This example only highlights the “Products” section. It adds a red background color in the submenu (<ul>).

• Highlighting Form Errors

  • HTML

<form>

  <div class=“form-group”>

    <label for=“email”>Email:</label>

    <input type=“email” id=“email”>

    <p class=“error-message”>Please enter a valid email</p>

  </div>

</form>

• CSS

.form-group:has(.error-message) input { 

  border-color: red;

}

This example will add a red border to an input field in a form group with an error message.

Key Points to Remember

Specificity

The styles inside :has() borrow the importance level of the most important item. 

Let’s say we have this CSS:

article:has(> p.highlight) { 

   background-color: yellow;

}

The main selector is the article. But, the styles inside the :has() block will act as if you had written article p.highlight. This is because p.highlight is the most specific selector within the :has(). We can style parent elements based on their children with simple CSS. We don’t need complex chains.

Browser Support 

:has() is an exciting CSS feature. It offers powerful styling options, so it is popular among web developers. Modern web browsers like Chrome, Edge, and Safari support it well. But, always think about browser compatibility. It’s great to know that Firefox has recently joined the party and added support for this feature. As web technologies evolve quickly, staying up-to-date is crucial. Use resources like Can I Use: (https://caniuse.com/css-has). They help you ensure your sites and apps look good in different browsers. They can pinpoint support levels for features like :has().z