CSS :focus-within Pseudo-class

Definition and Usage

CSS :focus-within Pseudo-classes are used to match an element if the element or any of its descendant elements gain focus.

Example

When a field in the form gains focus, select and set the style of the form:

form:focus-within {
  border: 2px solid black;
  background-color: beige;
  color: black;

Try It Yourself

CSS Syntax

:focus-within {
  css declarations;

Technical Details

Browser Support

The numbers in the table indicate the first browser version that fully supports this pseudo-class.

Related Pages

Tutorial:CSS Pseudo-classes

Reference:CSS :focus pseudo-class