От автора: сегодня я нашел новый CSS псевдокласс, с помощью которого веб-разработчики смогут стилизовать состояния фокуса. Псевдокласс :focus-within становится активным, когда сам элемент получает фокус или любой из его потомков.
Например, следующий HTML-код:
1 2 3 4 |
<div class="container" tabindex="0"> <label for="text">Enter text</label> <input id="text" type="text" /> </div> |
и CSS:
1 2 3 |
.container:focus-within { background-color: #aaa; } |
Когда div с классом .container получает фокус (в нашем случае блок может получить фокус, так как используется свойство tabindex 0, чисто для примера), его фон меняется на #aaa.
Блок получит фон #aaa, если любой потомок контейнера получит фокус. То есть если input получит фокус, то фон div станет #aaa.
Это свойство заменит JS, который раньше часто использовали для таких целей.
Псевдокласс :focus-within в настоящее время поддерживается в Firefox (52+), Safari (10.1+) и будет поддерживаться в Chrome 60 без флага.
На Codepen можно посмотреть свойство в действии (в браузере с поддержкой).
Источник: //www.iandevlin.com/
Редакция: Команда webformyself.