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.