Псевдоклассы CSS: как работает :focus-within

Development | Amber | Комментировать запись

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

HTML и CSS-код

Давайте рассмотрим применение псевдокласса :focus-within в такой форме. Начнем с разметки:

<form tabindex="0" class="myForm">
  <h3>What's your favorite color?</h3>
  <input type="text">
</form>

Правила CSS будут выглядеть так: 

.myForm:focus-within {
  background: #f8f8f8
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 35px,
      rgba(255, 255, 255, 0.5) 35px,
      rgba(255, 255, 255, 0.5) 70px
    );
}
.myForm:focus-within::before {
  content: "I'm a happy selected form!";
  color: rgb(239, 187, 53)
}

Как работает полученная в результате форма? Если браузер, в котором вы ее запускаете, поддерживает псевдокласс :focus-within, вы увидите на экране простую форму с вопросом What’s your favorite color и полем для вашего ответа. Обратите внимание на то, как к содержащему элементу формы применяется другой фон, когда вы нажимаете на форму или на поле для входных данных.

Если бы мы использовали старый добрый псевдокласс :focus вместо :focus-within, наша форма стилизовалась бы только тогда, когда фокус находится на самой форме, а на входные данные это бы не распространялось.

Заключение 

Чтобы :focus-within работал должным образом, вам нужно убедиться, что на внутренних элементах контейнера можно фокусироваться. Входные элементы по фокусируемы умолчанию, но такие элементы, как div, img или p — нет. Чтобы сделать элемент фокусируемым, можно использовать атрибут tabindex. Элемент контейнера также должен быть фокусируемым, чтобы получить стиль контейнера.

Еще по состоянию на 2020 год все современные браузеры поддерживают focus-within, но если вы хотите убедиться в том, что ваш браузер сможет работать с этим псевдоклассом, проверьте страницу Can I Use.

Читайте также: Как работает CSS-псевдокласс :matches()