:focus-within
A pseudo-class that targets an element if it or any of its children are focused. It's great for highlighting a whole form group when an input inside is active.
Syntax
/* Usage Example */
.form-group:focus-within {
/* Highlights the entire container when an input inside is focused */
background-color: #eff6ff;
border-color: #3b82f6;
}:focus-within Browser support
Widely available
Since
2020 95% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
60+
52+
10.1+
79+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more