:focus-within
The :focus-within CSS pseudo-class matches an element if the element or any of its children are focused.
Overview
The :focus-within CSS pseudo-class matches an element if the element or any of its children are focused.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 60 | 79 | 52 | 10.1 | 60 | 10.3 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.form-group:focus-within {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}
.dropdown:focus-within .dropdown-menu {
display: block;
opacity: 1;
}Live demo
Use cases
Using :focus-within
The :focus-within CSS pseudo-class matches an element if the element or any of its children are focused.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features