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 4 The definition of ':focus-within' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
: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