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

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

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

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

<div class="container" tabindex="0"> 
  <label for="text">Enter text</label> 
  <input id="text" type="text" /> 
</div> 

и CSS:

.container:focus-within { 
  background-color: #aaa; 
}

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree