How can you style the parent when any child inside it is focused?

Q: How can you style the parent when any child inside it is focused?

The `:focus-within` pseudo-class in CSS allows you to style a parent element when any of its child elements receive focus. It’s useful for creating interactive effects on containers that include input fields, links, or buttons. `:focus-within` applies styles to an element if it or any of its descendants are focused. It works for nested elements like inputs, buttons, or links inside a container. Commonly used for styling form groups, card containers, or navigation menus when focused. /* Container style */ .form-group { border: 2px solid #ccc; padding: 10px; border-radius: 5px; transition: border-color 0.3s; } /* Highlight parent when any child is focused */ .form-group:focus-within { border-color: dodgerblue; background-color: #f0f8ff; } /* Input field style */ input { border: none; outline: none; width: 100%; } Username In this example, when the user focuses on the input field inside `.form-group`, the parent container’s border turns blue and its background changes to a light shade, thanks to the `:focus-within` pseudo-class. Use `:focus-within` to create visual cues for grouped elements or form sections. Combine it with transitions for smooth highlighting effects. Avoid overusing focus styles that distract the user from the input itself. Ensure accessibility by maintaining visible focus outlines on individual elements.

Difficulty: 6/10

CSS :focus-within, parent-child styling, accessibility implications

Styling a Parent Element Using :focus-within in CSS

The :focus-within pseudo-class in CSS allows you to style a parent element when any of its child elements receive focus. It’s useful for creating interactive effects on containers that include input fields, links, or buttons.

Key Points About :focus-within

1
:focus-within applies styles to an element if it or any of its descendants are focused.
2
It works for nested elements like inputs, buttons, or links inside a container.
3
Commonly used for styling form groups, card containers, or navigation menus when focused.

Example: Styling a Parent When a Child Is Focused

In this example, when the user focuses on the input field inside .form-group, the parent container’s border turns blue and its background changes to a light shade, thanks to the :focus-within pseudo-class.

Best Practices

1
Use :focus-within to create visual cues for grouped elements or form sections.
2
Combine it with transitions for smooth highlighting effects.
3
Avoid overusing focus styles that distract the user from the input itself.
4
Ensure accessibility by maintaining visible focus outlines on individual elements.

Scenario Questions

0-2 years experience

2-5 years experience

1A dropdown menu’s parent container isn’t highlighting when a child button is focused — what would you check first, and why?

How can you style the parent when any child inside it is focused?

Styling a Parent Element Using :focus-within in CSS

Scenario Questions

Follow-up Questions