# 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 `:indeterminate` pseudo-class
  that styles switches that are in an indeterminate state
- the `:default` pseudo-class
  that sets a default style for elements
- the `:fullscreen` pseudo-class
  that styles elements in full screen mode
- the `:placeholder-shown` pseudo-class
  that sets a style for elements when displaying tooltip text
- the `caret-color` property
  that sets a color of the text cursor in input

← →
↑
en ru