CSS Selectors Level 4: :focus-within pseudo-class

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.

Comments

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

Demos

• http://codepen.io/anon/pen/xOLJym
• https://blogs.igalia.com/mrego/files/2017/05/focus-within-demo.html
• https://blogs.igalia.com/mrego/files/2017/05/focus-within-menu.html

Documentation

• https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

Specification

Editor's draft

Status in Chromium

Blink components: Blink>CSS

Enabled by default (launch bug) in:

• Chrome for desktop release 60
• Opera release 47
• Opera for Android release 47

Consensus & Standardization

• Firefox: Shipped
• Edge: No public signals
• Safari: Shipped
• Web Developers: Positive

Owner

• rego@igalia.com

Last updated on 2017-06-16