CSS от А до Я: как использовать псевдокласс enabled

CSS от А до Я: как использовать псевдокласс enabled

От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе с псевдоклассом :enabled.

E значит :enabled

В CSS есть множество псевдоклассов, которые помогают стилизовать разные состояния элементов, а также получить доступ к определенным элементам в зависимости от их отношения или позиции к другим элементам. Псевдоклассы :enabled и :disabled открывают и закрывают элементы для заполнения или выбора.

С помощью псевдокласса :enabled можно стилизовать активные состояния элементов форм, таких как button, input, optgroup, option, select и textarea. Если у элемента есть состояние :enabled, то у него есть и состояние :disabled.

Эти состояния задаются при помощи атрибута disabled с булевым значением. Стоит отметить, что атрибута enabled нет, а псевдокласс :enabled есть.

<input type="text"/> 
<input type="text" disabled/>

То есть элементы можно стилизовать как по их псевдоклассам при помощи селектора атрибута, так и по отрицанию этого селектора:

input:enabled { }
input:not([disabled]) { }
input:disabled { }
input[disabled] { }

Разницы нет никакой: все методы поддерживаются в IE9+, специфичность селекторов также одинаковая. Не знаю, как часто вы будете использовать эти селекторы, но мне интересно узнать про все варианты решения одной и той же задачи.

Автор: Guy Routledge

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

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

Практика 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