W3cubDocs

/CSS

:focus-within

The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)

/* Selects a <div> when one of its descendants is focused */
div:focus-within {
  background: cyan;
}

This selector is useful, to take a common example, for highlighting an entire <form> container when the user focuses on one of its <input> fields.

Syntax

:focus-within

Example

In this example, the form will receive special coloring styles when either text input receives focus.

HTML

<p>Try typing into this form.</p>

<form>
  <label for="given_name">Given Name:</label>
  <input id="given_name" type="text">
  <br>
  <label for="family_name">Family Name:</label>
  <input id="family_name" type="text">
</form>

CSS

form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}

Result

Specifications

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

Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 60 No1 52 No 47 10.1
Feature Android webview Chrome for Android Edge mobile Firefox for Android Opera Android iOS Safari Samsung Internet
Basic support 60 60 No1 52 47 10.3 ?

1. This feature is not implemented. See the enhancement request.

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within