MDN’s new design is in Beta! A sneak peek:

The :focus-within CSS pseudo-class matches any element that the :focus pseudo-class matches or that has a descendant that the :focus pseudo-class matches.  (This includes descendants in shadow trees.)

/* Selects any <div>, only when one of its descendants is focused */
div:focus-within {
  background: yellow;

This is useful for highlighting a whole section when one element inside it is focused, for example highlighting an entire form section container when a form input is focused.




.name-container { 
  padding: 4px; 

.name-container:focus-within {
  background: yellow;

input { 
  margin: 4px; 
  The div below will have a yellow background if
   either input inside is focused.

<div class="name-container">
  <label for="given_name">
    Given Name:
    <input id="given_name" type="text">
  <label for="family_name">
    Family Name:
    <input id="family_name" type="text">


Specification Status Comment
Selectors Level 4
The definition of ':focus-within' in that specification.
Working Draft Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 60[1] No support[2] 52.0 (52.0)[3] No support 47 10.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 60[1] 52.0 (52.0)[3] No support 47 10.3

[1] This feature was implemented in Chromium bug 617371.

[2] This feature is not implemented yet. See the related enhancement request.

[3] This feature was implemented in bug 1176997.

Document Tags and Contributors

 Contributors to this page: chrisdavidmills, scottaohara, rego, tysongach, DBaron, jpmedley, Sebastianz
 Last updated by: chrisdavidmills,