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

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

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

Синтаксис

Пример

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

HTML

<p>Try typing into this form.</p><form>  <label for="given_name">Given Name:</label>  <input type="text" />  <br />  <label for="family_name">Family Name:</label>  <input type="text" /></form>

CSS

form {  border: 1px solid;  color: gray;  padding: 4px;}form:focus-within {  background: #ff8;  color: black;}input {  margin: 4px;}

Итог

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

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

Смотрите также

• :focus
• :focus-visibleЭкспериментальная возможность