Псевдокласс :focus-within

Псевдокласс :focus-within

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

Например, следующий HTML-код:

и CSS:

Когда div с классом .container получает фокус (в нашем случае блок может получить фокус, так как используется свойство tabindex 0, чисто для примера), его фон меняется на #aaa.

Блок получит фон #aaa, если любой потомок контейнера получит фокус. То есть если input получит фокус, то фон div станет #aaa.

Это свойство заменит JS, который раньше часто использовали для таких целей.

Псевдокласс :focus-within в настоящее время поддерживается в Firefox (52+), Safari (10.1+) и будет поддерживаться в Chrome 60 без флага.

На Codepen можно посмотреть свойство в действии (в браузере с поддержкой).

Источник: //www.iandevlin.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: