CSS :has(selector)

The CSS :has() pseudo-class allows you to style an element based on its descendants or child elements. It is commonly referred to as a “parent selector” because it enables styling a parent element when it contains specific child elements. This pseudo-class is useful for creating dynamic and context-aware styles.

The syntax for the :has() pseudo-class is:

</>
Copy
selector:has(child-selector) {
    property: value;
}

Where:

ParameterDescription
selectorThe parent element to which the styles will apply.
child-selectorThe selector for the child element that determines if the parent element is styled.
propertyThe CSS property to style the parent element.

Examples

1. Styling a Container with a Button

In this example, a div container is styled with a blue border if it contains a button element.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div:has(button) {
            border: 2px solid blue;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div>
        <p>This container does not have a button.</p>
    </div>
    <div>
        <p>This container has a button:</p>
        <button>Click Me</button>
    </div>
</body>
</html>

2. Highlighting a Parent Element with an Active Link

Here, a nav element is styled with a background color if it contains a link (a) with the .active class.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        nav:has(a.active) {
            background-color: lightgreen;
            padding: 10px;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#home">Home</a>
        <a href="#about" class="active">About</a>
        <a href="#contact">Contact</a>
    </nav>
</body>
</html>

3. Styling a Form with a Specific Input Type

In this example, a form is styled with a yellow background if it contains an input of type email.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        form:has(input[type="email"]) {
            background-color: yellow;
            padding: 15px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <form>
        <label>Name:</label>
        <input type="text" placeholder="Your Name">
    </form>
    <form>
        <label>Email:</label>
        <input type="email" placeholder="Your Email">
    </form>
</body>
</html>

4. Highlighting an Article with Images

Here, an article is styled with a gray border if it contains an img element.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        article:has(img) {
            border: 1px solid gray;
            padding: 10px;
        }
    </style>
</head>
<body>
    <article>
        <p>This article does not have an image.</p>
    </article>
    <article>
        <p>This article has an image:</p>
        <img src="/img/lion.jpg" alt="Example Image">
    </article>
</body>
</html>

5. Styling a List with Specific Items

In this example, an ul list is styled with a green background if it contains a list item (li) with the class .featured.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        ul:has(li.featured) {
            background-color: lightgreen;
            padding: 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
    <ul>
        <li class="featured">Featured Item</li>
        <li>Another Item</li>
    </ul>
</body>
</html>