:focus-within

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The :focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)

Try it

This selector is useful, to take a common example, for highlighting an entire <form> container when the user focuses on one of its <input> fields.

Syntax

css
:focus-within {
  /* ... */
}

Examples

In this example, the form will receive special coloring styles when either text input receives focus.

HTML

html
<p>Try typing into this form.</p>

<form>
  <label for="given_name">Given Name:</label>
  <input id="given_name" type="text" />
  <br />
  <label for="family_name">Family Name:</label>
  <input id="family_name" type="text" />
</form>

CSS

css
form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}

Result

Specifications

Specification
Selectors Level 4
# the-focus-within-pseudo

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:focus-within

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also