CSS Selector Level 4 » Focus container pseudo-class

The focus container pseudo-class acts like :focus and additionally matching elements whose descendants in the flat tree have received focus too.

Syntax

Copy
:focus-within {
    /* declarations */
}

Example

Copy
form:focus-within {
    background-color: yellow;
}

After focusing the input the parent form should have a yellow background.

Try example in CodePen

Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (60) Yes (52) Yes (10.1) No No Yes (47)
Mobile Yes (60) Yes (52) Yes (10.3) No No Yes (47)

Usage statistics (Alexa Top 1,250,000 sites)


Please wait a moment, the comments start loading now...
explorermozillachromesafariopera