:focus-within

Summary

The :focus-within CSS pseudo-class applies to all elements, for which the :focus pseudo-class applies and additionally to all shadow-including descendants. That is, it is applied when an element has received focus, either from the user selecting it using a keyboard or by activating with the mouse (e.g. a form input).

Shadow-including descendant means that the element is either the decendant of another element or the element's root element is a shadow root.

This pseudo class applies only to the focused element, not its parents, like :checked and :enabled but unlike :active or :hover.

Syntax

:focus-within { style properties }

Examples

.first-name:focus-within {
  color: red;
}

.last-name:focus-within {
  color: lime;
}
<input class="first-name" value="I'll be red when focused">
<input class="last-name" value="I'll be lime when focused">

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 No support[4]
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 No support

[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.

[4] This feature is implemented in the Safari Technology Preview since release 8.0.

Document Tags and Contributors

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