← Back to pseudo-classes

CSS Pseudo-class / Element

:focus-within

User Action

Applies styles to an element when it or any of its descendants has focus.

Syntax

selector:focus-within { }

Example

form:focus-within { border-color: #3dffa0; }

Common use cases

  • Highlighting a form container when any input is focused
  • Revealing labels or hints when a fieldset is active
  • Styling parent elements based on child focus

Practical developer insight

:focus-within bubbles up from children — useful for styling a parent container without JavaScript when any child receives focus.

Related

:focus:focus-visible:has()