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

cssselector:focus-within {

}

Example

Let's set the parent element's background color to blue when its child input element has focus:

html<div>
  Enter your name: <input name="user">
</div>

cssdiv {
  width: 300px;
  height: 50px;
  padding: 10px;
}
div:focus-within {
  background-color: #C2DDFD;
}

Результат:

See also