:focus-within

The :focus-within CSS pseudo-class matches any element that the :focus pseudo-class matches or that has a descendant that the :focus pseudo-class matches. (This includes descendants in shadow trees.)

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

This is useful, to take one example, for highlighting an entire form container when the user focuses on one of its form inputs.

Syntax

:focus-within

Examples

.name-container { 
  padding: 4px; 
}
.name-container:focus-within {
  background: yellow;
}
input { 
  margin: 4px; 
}

<p>The div below will have a yellow background if
    either input inside is focused.</p>
<div class="name-container">
  <label for="given_name">
    Given Name:
    <input id="given_name" type="text">
  </label>
  <label for="family_name">
    Family Name:
    <input id="family_name" type="text">
  </label>
</div>

Specifications

Browser compatibility

[1] This feature was implemented in Chromium bug 617371.

[2] This feature is not implemented yet. See the related enhancement request.

[3] This feature was implemented in bug 1176997.