Focuswithin

Focus-within is a CSS pseudo-class that matches an element if any element inside it currently has focus. It is part of CSS Selectors Level 4 and is used to style a container when a descendant receives keyboard focus. This helps create visible focus cues for users navigating with keyboards or assistive devices.

How it works: When any descendant element that can receive focus is focused, the host element matches :focus-within. The pseudo-class remains true as focus moves between descendants; when focus leaves all descendants, the state ends. This allows styling of composite controls, form groups, panels, or menu trees based on the focus state of their internal elements.

Usage examples: .card:focus-within { outline: 2px solid blue; } This enables highlighting a group when any inner element gains focus, without requiring the container itself to be focusable. It is commonly used on form fieldsets, navigation groups, or custom widgets to provide an accessible and intuitive focus cue.

Considerations: :focus-within applies to elements that contain focusable descendants and does not require the container to be focusable itself. It complements :focus and :focus-visible by describing the broader focus state within a subtree rather than only on the element that directly possesses focus.

Browser support: Supported in all major modern browsers. For older environments, developers may rely on JavaScript event listeners (focusin/focusout) or alternative class-based fallbacks to replicate similar behavior. See also :focus and :focus-visible for related focus styling concepts.