Categories

How to Use the :has() Selector in CSS

Donate with

82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

Copy Monero Donation Address

Donate with

Donate BAT now

Verified BAT publisher

In the ever-evolving world of web development, CSS continues to introduce powerful tools that make designing and styling websites more efficient. One such tool is the :has() pseudo-class, which provides a way to select elements based on their descendants or other conditions. This blog post will delve into the capabilities of the :has() pseudo-class, providing practical examples to illustrate its use.

What is the :has() Selector?

The :has() pseudo-class is a CSS relational pseudo-class that allows you to style an element if it contains a certain descendant. This can be particularly useful for complex layouts and dynamic content styling.

selector:has(selector) {
    /* Styles */
}

Practical Examples of :has() Selector

Let's explore some scenarios where :has() can be a game-changer.

Example 1: Highlighting Elements with a Specific Child Element
Imagine you have a list of product items, and you want to highlight any product that has a specific feature. With :has(), this becomes straightforward:

HTML:

<div class="product">
    <h2>Product 1</h2>
    <p>This product is a great choice.</p>
</div>
<div class="product">
    <h2>Product 2</h2>
    <p>This product has a special feature.</p>
    <span class="feature">Special Feature</span>
</div>
<div class="product">
    <h2>Product 3</h2>
    <p>This product is available in multiple colors.</p>
</div>

CSS:

.product:has(span.feature) {
    border: 2px solid green;
    padding: 10px;
    background-color: #e0ffe0;
}

In this example, only the second product will be highlighted because it contains a span with the class "feature".

Example 2: Styling Forms Based on Input State
You can use :has() to style forms based on the input state, making form validation more user-friendly:

HTML:

<form>
    <label for="email">Email:</label>
    <input type="email" id="email" required>
    <button type="submit">Submit</button>
</form>

CSS:

form:has(input:invalid) {
    border: 2px solid red;
}
input:invalid {
    background-color: #ffdddd;
}

This example highlights the form border in red and changes the background color of invalid inputs to provide immediate visual feedback to the user.

Example 3: Styling Lists Based on Nested Elements
Suppose you want to style a list item if it contains a nested element with specific content. Here’s how you can do it with :has():

HTML:

<ul>
    <li>Item 1</li>
    <li>Item 2 
        <ul>
            <li>Sub-item A</li>
            <li class="highlight">Sub-item B</li>
        </ul>
    </li>
    <li>Item 3</li>
</ul>

CSS:

li:has(ul .highlight) {
    font-weight: bold;
    color: blue;
}

In this example, only the second list item will be styled differently because it contains a nested ul with a list item that has the class "highlight". This is useful for styling parent items based on the presence of specific nested content.

Browser Support and Considerations

As powerful as the :has() pseudo-class is, it's important to note that not all browsers fully support it yet. Make sure to check the current compatibility on Can I use and consider fallbacks or polyfills for unsupported browsers.

Conclusion

The :has() pseudo-class in CSS opens up new possibilities for styling elements based on their descendants, making your stylesheets more dynamic and flexible. Whether you're highlighting content, styling forms, or enhancing list items, :has() provides a powerful tool for modern web development. Experiment with it in your projects and discover how it can simplify your CSS and improve your user interface.