The :focus-within pseudo-class applies to elements for which the :focus pseudo class applies. An element also matches :focus-within if one of its descendants in the flat tree (including non-element nodes, such as text nodes) matches the conditions for matching :focus.

Demos

Documentation

Specification

Editor's draft

Status in Chromium

Blink>CSS


Enabled by default (tracking bug) in:

  • Chrome for desktop release 60

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owner

Comments

Information about Chromium implementation: https://blogs.igalia.com/mrego/2017/05/03/adding-focus-within-selector-to-chromium/

Search tags

css-selectors, selectors-4, focus-within,

Last updated on 2020-11-19