:focus-within in CSS: What It Is and How to Use It

:focus-within is a CSS pseudo-class that applies styles to an element when any of its child elements have keyboard focus. It helps highlight a container when a user interacts with any input or focusable element inside it.

How It Works

Imagine a group of friends holding hands in a circle. If one friend starts talking, the whole circle becomes aware and reacts. Similarly, :focus-within lets a parent element "know" when any of its child elements have focus, like when you click or tab into a form field inside a box.

This means you can style the parent container differently, such as adding a border or changing background color, to show the user where they are working inside the page. It works by checking if any child element inside the parent is focused, then applying the styles to the parent itself.

Example

This example shows a form container that highlights with a blue border when any input inside it is focused.

html

html {
  font-family: Arial, sans-serif;
  padding: 2rem;
}

.form-container {
  border: 2px solid #ccc;
  padding: 1rem;
  border-radius: 6px;
  max-width: 300px;
  transition: border-color 0.3s ease;
}

.form-container:focus-within {
  border-color: #007BFF;
  box-shadow: 0 0 5px rgba(0,123,255,0.5);
}

input {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

label {
  font-weight: bold;
}

<!-- HTML -->
<div class="form-container">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Enter your name">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Enter your email">
</div>

Output

A rectangular form box with two input fields. When you click or tab into either input, the box border changes from gray to bright blue with a subtle glow.

When to Use

:focus-within is useful when you want to improve user experience by clearly showing which part of a form or interactive area is active. For example:

• Highlighting a form section when a user focuses on any input inside it.
• Changing the style of a navigation menu when a submenu item is focused.
• Making complex UI components more accessible by visually grouping focused elements.

This helps users, especially those using keyboards or assistive devices, understand where they are on the page.

Key Points

• :focus-within applies styles to a parent when any child has focus.
• It works with keyboard focus, mouse clicks, and programmatic focus.
• Improves accessibility and user navigation clarity.
• Supported in all modern browsers.
• Great for styling forms, menus, and interactive containers.

Key Takeaways

:focus-within styles a parent element when any child element is focused.

It helps users see which container or section they are interacting with.

Use it to improve form and UI accessibility and clarity.

Works with keyboard and mouse focus events.

Supported by all modern browsers for consistent behavior.