:focus-within

CSS Псевдо-класс :focus-within соответсвует элементу, который либо сам находится в фокусе, либо содержит элемент, который находится в фокусе. Другими словами, он представляет элементу, который соответствует псевдоклассу :focus либо имеет потомка, который соовтетсвует :focus. (Включая потомков в shadow trees.)

/* Выделяет <div> когда один из его потомков находится в фокусе */
div:focus-within {
  background: cyan;
}

Этот селектор может оказаться полезным, например, для подсвечивания всего контейнера <form>, когда пользователь устанавливает фокус на одном из его полей ввода <input>.

Синтаксис

:focus-within

Пример

В этом примере форма раскрашивается при помощи специального правила стилей, когда один из её дочерних полей для ввода находится в фокусе.

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;
}

Итог

Спецификации

Спецификация Статус Комментарий
Selectors Level 4
Определение ':focus-within' в этой спецификации.
Рабочий черновик Initial definition.

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
:focus-withinChrome Полная поддержка 60Edge Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This feature is not implemented. See the enhancement request.
Firefox Полная поддержка 52IE Нет поддержки НетOpera Полная поддержка 47Safari Полная поддержка 10.1WebView Android Полная поддержка 60Chrome Android Полная поддержка 60Firefox Android Полная поддержка 52Opera Android Полная поддержка 44Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка 8.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.

See also