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.
:focus-within
In this example, the form will receive special coloring styles when either text input receives focus.
<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>
form { border: 1px solid; color: gray; padding: 4px; } form:focus-within { background: #ff8; color: black; } input { margin: 4px; }
Specification | Status | Comment |
---|---|---|
Selectors Level 4 The definition of ':focus-within' in that specification. | Working Draft | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 60 | No
|
52 | No | 47 | 10.1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 60 | 60 | No
|
52 | 47 | 10.3 | No |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within