The focus-within pseudo-class
The focus-within pseudo-class specifies
a style of elements that are in focus. Unlike
the focus pseudo-class, which sets a
style directly to the element itself,
focus-within sets the style
for a parent element.
Syntax
selector:focus-within {
}
Example
Let's set the parent element's background color to blue when its child input element has focus:
<div>
Enter your name: <input name="user">
</div>
div {
width: 300px;
height: 50px;
padding: 10px;
}
div:focus-within {
background-color: #C2DDFD;
}
:
See also
-
the
:indeterminatepseudo-class
that styles switches that are in an indeterminate state -
the
:defaultpseudo-class
that sets a default style for elements -
the
:fullscreenpseudo-class
that styles elements in full screen mode -
the
:placeholder-shownpseudo-class
that sets a style for elements when displaying tooltip text -
the
caret-colorproperty
that sets a color of the text cursor in input
