CSS :has() Selector

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 11 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The :has() selector in CSS is a relational pseudo-class that allows you to style elements based on their descendants or other related elements.

It is part of the CSS4 selectors and provides a powerful way to style parent elements depending on the presence or state of their child elements. This opens up possibilities that were previously only achievable through JavaScript.

💡 Syntax

The signature of the :has() Selector is as follows:

Syntax

Copied

element:has(selector) {
    /* CSS properties */
}

The :has() pseudo-class takes a selector as an argument, allowing you to target an element if it contains one or more matching elements.

Parameters

element: The element you want to style.
selector: A valid CSS selector that matches one or more child elements.

📝 Example

Here is an example of how to use the :has() selector in CSS:

☠️ HTML

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS :has() Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="box">
            <p>This is a box with text.</p>
        </div>
        <div class="box">
            <p>This box has an <a href="#">anchor</a> inside.</p>
        </div>
    </div>
</body>
</html>

🎨 CSS

CSS

Copied

/* Style parent div that has an anchor tag as a child */
.box:has(a) {
    border: 2px solid blue;
    background-color: #e0f0ff;
}

/* Style divs that don't have an anchor */
.box {
    border: 2px solid gray;
    background-color: #f0f0f0;
}

In this example:

The .box elements containing an anchor (<a>) inside them will have a blue border and a light blue background.
The .box elements that do not have an anchor will retain the default gray border and background.

💬 Usage Tips

Targeting Parents: The :has() selector is extremely useful for styling parent elements based on the presence or absence of certain child elements. For example, you can change the style of a div if it contains a button or input field.
Dynamic Layouts: It can be used to conditionally apply styles, which means you can modify the layout of a page based on the content it holds without needing JavaScript.
Form Validation: This selector can be very helpful for form validation, as you can style elements based on whether certain input fields exist or are filled.

⚠️ Common Pitfalls

Browser Support: The :has() selector is part of CSS4 and has limited support in browsers at the moment. Be sure to check browser compatibility before using it in production.
Performance: Since the :has() selector allows for complex relational matching, using it extensively on large document structures can affect performance. Use it carefully for critical styling only.
Misuse: It’s tempting to replace all JavaScript-based DOM manipulations with :has(), but remember that this selector is for styling, not for manipulating content.

🎉 Conclusion

The :has() selector is a powerful addition to the CSS toolkit, allowing you to apply styles based on a parent-child relationship without relying on JavaScript. While its current browser support is limited, it’s worth experimenting with for future-ready web design. As support grows, this selector will make it much easier to build dynamic, style-responsive layouts.