The :focus-within pseudo selector in CSS is a bit unusual, although well-named and rather intuitive. It selects an element if that element contains any children that have :focus.
Which works like this…
I said “unusual” because it’s not common in CSS to be able to select a parent element based on the existence or state of child elements. Sure is useful though!
Here’s an example form to try it on:
See the Pen Simple Responsive Form with :focus-within by Chris Coyier (@chriscoyier) on CodePen.
Note that example uses :focus-within on the entire form and on interior input-wrapping
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.DesktopChromeFirefoxIEEdgeSafari6052No7910.1Mobile / TabletAndroid ChromeAndroid FirefoxAndroidiOS Safari84688110.3