midCSS
What is the :focus-within pseudo-class?
Updated Apr 28, 2026
Short answer
It applies styles to an element if any of its child elements currently have focus.
Deep explanation
This is incredibly powerful for forms. If a user clicks into a text input, the surrounding parent form group or label can change styles automatically to indicate active engagement, without writing any JavaScript 'onFocus' event listeners.
Real-world example
Highlighting an entire custom search bar wrapper (containing an input and a submit button) when the user types inside the input.
Common mistakes
- Confusing it with `:focus`, which only triggers when the parent element itself is strictly focused, not its descendants.
Follow-up questions
- Does :focus-within work for keyboard navigation?