Widely available Supported across all major browsers. Safe to use in production.

:focus-within

The :focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused. 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.)

Selectors

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:focus-within
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

formgroup

:focus-within formgroup demo.

PreviewFullscreen

Searchboks

:focus-within Searchboks demo.

PreviewFullscreen

cardinsidefocus

:focus-within cardinsidefocus demo.

PreviewFullscreen

Use cases

  • Using :focus-within

    The :focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links