:focus-within CSS pseudo-class
The :focus-within
pseudo-class matches elements that either themselves match :focus
or that have descendants which match :focus
.
IE | Edge | Firefox | Chrome | Safari | Opera | iOS Safari | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Chrome for Android | Firefox for Android | IE Mobile | UC Browser for Android | Samsung Internet | QQ Browser | Baidu Browser |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
49 | |||||||||||||||||
56 | 9.3 | 4.4 | |||||||||||||||
14 | 52 | 57 | 10 | 10.0-10.2 | 4.4.3-4.4.4 | 4 | |||||||||||
11 | 15 | 53 | 58 | 10.1 | 44 | 10.3 | all | 56 | 10 | 37 | 57 | 52 | 11 | 11.4 | 5 | 1.2 | 7.12 |
54 | 59
See notes:
|
TP | 45 | ||||||||||||||
55 | 60 | 46
See notes:
|
|||||||||||||||
56 | 61 |
Notes
-
1
Can be enabled via the "Experimental Web Platform Features" flag
Links
The Future Generation of CSS Selectors: Level 4: Generalized Input Focus Pseudo-class
ally.style.focusWithin Polyfill, part of ally.js
Microsoft Edge feature request on UserVoice
WebKit bug #140144: Add support for CSS4 `:focus-within` pseudo
Chromium issue #617371: Implement `:focus-within` pseudo-class from Selectors Level 4
Mozilla bug #1176997: Add support for pseudo class `:focus-within`
JS Bin testcase
Mozilla Developer Network (MDN) documentation - :focus-within