:focus-within

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

Попробуйте

Этот селектор полезен, например, для выделения всего контейнера <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;
}

Результат

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

Спецификация
Селекторы Уровень 4 # the-focus-within-pseudo

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`:focus-within`	60	79	52	47	10.1	60	52	44	10.3	8.0	60

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within