Create More Dynamic Styles with :has()

By Anish Thapa

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

The Future of Web Design

If you want to enhance your CSS styling, the `:has()` pseudo-class is a great option. It can help you make designs more engaging and interactive. You won’t need to rely on JavaScript. With its vast capabilities, you can style lists, forms, navigation, and more. Try it in your own web projects. See how it can lift your website’s look and function.

If you’re interested in :has(), I recommend checking out interactive examples on CodePen. For a great starting point, take a look at this one: https://codepen.io/collection/wapNEJ?cursor=eyJwYWdlIjoxfQ==. Feel free to play around with the code and see how different adjustments can affect the styles.

Below, you can find some examples of the :has() selector from CodePen.

Stephanie Eckles shared a valuable code snippet. It showcases how to use the ‘:has()’ selector to target elements with a child in a specific range.

Useful reference

 

This is a list of resources. They provide information, examples, and guidance for learning about :has().

© 2024 Anish Thapa

Views: 0