CSS :focus-within Pseudo-Class Selector

Definition and Usage

The :focus-within pseudo-class selects an element when it or any of its descendants has focus.

This selector differs from the :focus pseudo-class in that it allows you to apply styles to a parent element.

“Focus” refers to the state where an element is ready to receive keyboard input or interaction. This typically occurs when a user navigates to an element using the Tab key or clicks on it.

Basic Example

HTML

<form>
    <fieldset>
        <legend>Enter your name</legend>
        <label for="user-name">Usrname</label>
        <input type="text" id="user-name" placeholder="Enter your name...">
    </fieldset>
</form>

Because :focus-within applies when any descendant element has focus, it is commonly used to enhance visual web accessibility. It is especially useful when designing for keyboard navigation or creating accessibility-friendly user interfaces.

The syntax of the :focus-within pseudo-class is as follows:

Syntax

Practical Examples

The :focus-within pseudo-class is particularly useful in creating interactive and accessible web components. Below are some practical scenarios demonstrating how it can enhance user experience by applying styles to parent elements when their child elements receive focus.

Highlighting a Form Section on Focus

HTML

<form>
    <fieldset>
        <legend>Contact Information</legend>
        <label for="email">Email</label>
        <input type="email" id="email" placeholder="Enter your email">
    </fieldset>
</form>

CSS

fieldset {
    padding: 1em;
    border: 2px solid gray;
    transition: border-color 0.3s ease;
}
fieldset:focus-within {
    border-color: blue;
    background-color: #e6f0ff;
}

When a user focuses on any input within the <fieldset>, the parent <fieldset> receives a visual highlight by changing the border color and background. This provides a clear contextual cue that groups related form controls together, improving form usability and accessibility. The smooth transition effect also enhances user experience by making the focus change visually appealing rather than abrupt.

Highlighting a Card on Focus

HTML

<div class="card" tabindex="0">
    <h3>Product Title</h3>
    <p>Short description of the product.</p>
    <button>Learn More</button>
</div>
<div class="card" tabindex="0">
    <h3>Another Product</h3>
    <p>Another short description.</p>
    <button>Learn More</button>
</div>

CSS

.card {
    border: 1px solid #ccc;
    padding: 1em;
    margin: 1em 0;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    outline: none;
}
.card:focus-within {
    border-color: #007acc;
    box-shadow: 0 0 10px #007acc;
}

By adding tabindex="0" to each card, the entire card becomes focusable via keyboard navigation. When any focusable element inside the card (like the button) receives focus, the :focus-within selector highlights the card by changing its border color and adding a subtle glowing shadow. This visual feedback helps users easily identify which card is active, improving accessibility and user experience, especially for keyboard users.