CSS :focus-within Pseudo-Class

CSS :focus-within Pseudo-Class

The CSS :focus-within pseudo-class selects an element when it or one of its descendants has focus. It is commonly used to highlight form groups, search boxes, navigation menus, and other containers when a user interacts with an element inside them.

:focus-within Syntax

:focus-within {
  property: value;
}

The :focus-within pseudo-class does not accept arguments. It can be combined with element selectors, class selectors, and other CSS selectors.

Example Syntax

.form-group:focus-within {
  background-color: #eaf6fc;
  border-color: #0088cc;
}

This rule changes the appearance of a form group when the group itself or an element inside it receives focus.

The :focus-within pseudo-class has a specificity of 0-1-0. Combined with the .form-group class selector, its specificity becomes 0-2-0.

Targeting Different Containers

.form-group:focus-within,
.search-box:focus-within,
.menu-item:focus-within {
  outline: 2px solid #0088cc;
}

Each container receives an outline while it contains the focused element.

How :focus-within Works

The :focus-within pseudo-class matches an element when that element has focus or when focus is located within its descendant tree, including descendants in shadow trees.

Unlike :focus, which matches the focused element itself, :focus-within can match multiple ancestor elements at the same time.

Focus Inside a Form

<form>
  <div class="form-group">
    <label for="username">Username:</label>
    <input type="text" id="username">
  </div>
</form>

.form-group:focus-within {
  background-color: #eaf6fc;
}

When the input receives focus, the surrounding .form-group matches :focus-within and changes its background color.

Nested Containers

<div class="outer">
  <div class="inner">
    <button type="button">Select</button>
  </div>
</div>

.outer:focus-within {
  border: 2px solid #0088cc;
}
.inner:focus-within {
  background-color: #eaf6fc;
}

When the button receives focus, both the outer and inner containers match :focus-within.

Keyboard and Mouse Focus

The pseudo-class works with focus established through keyboard navigation, mouse interaction, touch interaction, or JavaScript. Whether a particular interaction moves focus depends on the element and browser.

:focus-within Matching Behavior

The selector matches based on the location of focus within an element's descendant tree.

Matching Conditions

Focus Moving Between Fields

When a user moves between two inputs in the same form group, the group can remain styled because focus stays inside its descendant tree.

Programmatic Focus

document.querySelector("#username").focus();

If the input exists and receives focus, its containing elements can match :focus-within even though focus was assigned through JavaScript.

:focus-within vs. :focus

Both pseudo-classes respond to focus, but they match different sets of elements.

Comparison

Example

input:focus {
  border-color: #0088cc;
}
.form-group:focus-within {
  background-color: #eaf6fc;
}

The input border changes when the input has focus. The form group background changes when focus is inside the group.

:focus-within vs. :focus-visible

The :focus-visible pseudo-class matches a focused element when the browser determines that a visible focus indicator is appropriate. The :focus-within pseudo-class matches an element whenever focus is inside its descendant tree.

Comparison

Combining Both Selectors

.form-group:focus-within {
  background-color: #eaf6fc;
}
.form-group input:focus-visible {
  outline: 3px solid #0088cc;
  outline-offset: 2px;
}

The group changes background color whenever its input receives focus. The input displays an outline when it matches :focus-visible.

Practical Uses

The :focus-within pseudo-class is useful when the focused element should also change the appearance of its surrounding interface.

Highlighting Form Groups

.form-group:focus-within {
  background-color: #f0f8ff;
  border-left: 4px solid #0088cc;
}

The form group receives a highlighted background and left border while one of its fields has focus.

Highlighting Search Boxes

.search-box:focus-within {
  box-shadow: 0 0 0 3px #b8e2f5;
}

A search container receives a highlight when its search input or another focusable element inside it has focus.

Navigation Submenus

.nav-item .submenu {
  display: none;
}
.nav-item:hover .submenu,
.nav-item:focus-within .submenu {
  display: block;
}

This pattern keeps a submenu visible when a link inside its navigation item receives keyboard focus. The menu must contain an accessible focusable control, and its visibility should not depend only on hovering.

Highlighting Table Rows

tr:focus-within {
  background-color: #eaf6fc;
}

A table row changes background color when a link, button, or other focusable element inside the row receives focus.

Styling Fieldsets

fieldset:focus-within {
  border-color: #0088cc;
}

This highlights a fieldset when one of its form controls has focus.

Accessibility

The :focus-within pseudo-class can help users identify the section of a form or interface in which they are currently working.

However, styling a container is not a replacement for a visible focus indicator on the focused control itself.

Preserving Focus Indicators

.form-group:focus-within {
  background-color: #eaf6fc;
}
.form-group input:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

This combination highlights the active group while keeping the focused input visually identifiable.

Avoiding Color-Only Feedback

Consider combining background changes with borders or outlines so the focused area remains identifiable without relying entirely on color differences.

Keyboard Navigation

Test forms and navigation components using the Tab and Shift+Tab keys. Ensure that focus remains visible and that menus and controls can be operated without a mouse.

Best Practices

• Use :focus-within to highlight containers containing focused elements.
• Keep visible focus indicators on individual interactive controls.
• Use :focus-visible alongside :focus-within when appropriate.
• Test nested containers to make sure focus styling appears where intended.
• Ensure keyboard users can reach and operate interactive elements.
• Avoid hiding essential content in ways that make it inaccessible to keyboard users.
• Do not assume that a container stops matching when focus moves between its descendants.

:focus-within Example

This example demonstrates how :focus-within highlights form groups. Click or use Tab to focus an input. The containing group changes its background and border while the input has focus.

HTML

<div class="focus-within-demo">
  <div class="form-group">
    <label for="demo-name">Name:</label>
    <input type="text" id="demo-name" placeholder="Enter your name">
  </div>
  <div class="form-group">
    <label for="demo-email">Email:</label>
    <input type="email" id="demo-email" placeholder="Enter your email">
  </div>
  <button type="button">Continue</button>
</div>

CSS

.focus-within-demo .form-group {
  padding: 12px;
  margin-bottom: 12px;
  border: 2px solid #ccc;
}
.focus-within-demo .form-group:focus-within {
  border-color: #0088cc;
  background-color: #eaf6fc;
}
.focus-within-demo label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.focus-within-demo input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #999;
  font: inherit;
}
.focus-within-demo input:focus-visible {
  outline: 2px solid #0088cc;
  outline-offset: 2px;
}
.focus-within-demo button {
  padding: 8px 12px;
  border: 1px solid #006699;
  background-color: #0088cc;
  color: #fff;
  cursor: pointer;
}

Browser Result

Play in Editor

Browser Support

Baseline: Widely available. The :focus-within pseudo-class is supported in modern versions of Chrome, Edge, Firefox, Safari, and other major browsers.

For current compatibility information, visit Can I Use? .

Specifications

The :focus-within pseudo-class is defined in Selectors Level 4. The specification describes matching based on focus within an element's descendant tree, including shadow trees.

Selectors Level 4 - The :focus-within Pseudo-Class