Web/CSS/ focus-within

The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. 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.)

/* Selects a <div> when one of its descendants is focused */
div:focus-within {
  background: cyan;
}

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

:focus-within

Examples

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

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

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

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

input {
  margin: 4px;
}

Result

Specifications

Specification	Status	Comment
Selectors Level 4The definition of ':focus-within' in that specification.	Working Draft	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`:focus-within`	Chrome Full support 60	Edge Full support 79	Firefox Full support 52	IE No support No	Opera Full support 47	Safari Full support 10.1	WebView Android Full support 60	Chrome Android Full support 60	Firefox Android Full support 52	Opera Android Full support 44	Safari iOS Full support 10.3	Samsung Internet Android Full support 8.0

Legend

Full support: Full support
No support: No support