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

:focus-within {
    /* declarations */

# Example

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) Yes (79) No Yes (47)
Mobile Yes (60) Yes (52) Yes (10.3) Yes (79) No Yes (47)

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

Due to an extreme price increase of our statistics provider the data collection was stopped in September 2018.

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