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 form's style:

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 pseudoklasse