CSS :focus-within

The CSS :focus-within pseudo-class applies styles to an element if it or any of its descendants have focus. It is especially useful for styling form containers, menu dropdowns, or other interactive elements when their child elements are focused.

The syntax for the :focus-within pseudo-class is:

</>
Copy
selector:focus-within {
    property: value;
}

Where:

ParameterDescription
selectorThe parent element to which the :focus-within pseudo-class will apply if it or any of its descendants receive focus.
propertyThe CSS property to style the element.
valueThe value assigned to the CSS property.

Examples

1. Styling a Form Container on Focus

In this example, a form container is styled with a blue border when any of its child elements (e.g., input fields) are focused.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        form:focus-within {
            border: 2px solid blue;
            padding: 10px;
        }
    </style>
</head>
<body>
    <form>
        <label>Name:</label>
        <input type="text" placeholder="Enter your name"><br><br>
        <label>Email:</label>
        <input type="email" placeholder="Enter your email">
    </form>
</body>
</html>

2. Highlighting a Navigation Menu

Here, a navigation container is styled with a background color when any of its links receive focus.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        nav:focus-within {
            background-color: lightblue;
            padding: 10px;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#">Home</a> | 
        <a href="#">About</a> | 
        <a href="#">Contact</a>
    </nav>
</body>
</html>

3. Styling a Dropdown Menu

In this example, a dropdown menu container is styled with a box shadow when any of its options are focused.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div.dropdown:focus-within {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="dropdown">
        <label for="options">Choose an option:</label>
        <select id="options">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </select>
    </div>
</body>
</html>

4. Styling a Search Bar Container

Here, a search bar container is styled with a border color change when the input field is focused.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div.search:focus-within {
            border: 2px solid green;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div class="search">
        <input type="text" placeholder="Search here...">
        <button>Search</button>
    </div>
</body>
</html>

5. Highlighting a Card Container

In this example, a card container is styled with a shadow and background color when any of its child elements are focused.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div.card:focus-within {
            background-color: #f9f9f9;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 15px;
        }
    </style>
</head>
<body>
    <div class="card">
        <h3>Contact Us</h3>
        <input type="text" placeholder="Your Name"><br><br>
        <textarea placeholder="Your Message"></textarea>
    </div>
</body>
</html>