:focus-within

Summary

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

In other words, this is a pseudo-class that is similar to :focus, but works more like :hover or :active, in that the pseudo-class also matches the ancestors of the focused element.

Syntax

:focus-within { style properties }

Examples

.name-container:focus-within {
  background: yellow;
}
input { margin: 3px }
<p>The div below will have a yellow background if
   either input inside is focused.</p>
<div class="name-container">
  <input placeholder="Given Name" type="text">
  <input placeholder="Family Name" type="text">
</div>

Specifications

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

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support No support[1] No support[2] 52.0 (52.0)[3] No support No support 10.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support[1] 52.0 (52.0)[3] No support No support 10.3

[1] This feature is not implemented yet. See Chromium bug 617371.

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

[3] This feature was implemented in bug 1176997.

Document Tags and Contributors

 Contributors to this page: tysongach, DBaron, jpmedley, Sebastianz
 Last updated by: tysongach,