От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе с псевдоклассом :enabled.
E значит :enabled
В CSS есть множество псевдоклассов, которые помогают стилизовать разные состояния элементов, а также получить доступ к определенным элементам в зависимости от их отношения или позиции к другим элементам. Псевдоклассы :enabled и :disabled открывают и закрывают элементы для заполнения или выбора.
С помощью псевдокласса :enabled можно стилизовать активные состояния элементов форм, таких как button, input, optgroup, option, select и textarea. Если у элемента есть состояние :enabled, то у него есть и состояние :disabled.
Эти состояния задаются при помощи атрибута disabled с булевым значением. Стоит отметить, что атрибута enabled нет, а псевдокласс :enabled есть.
|
1 2 |
<input type="text"/> <input type="text" disabled/> |
То есть элементы можно стилизовать как по их псевдоклассам при помощи селектора атрибута, так и по отрицанию этого селектора:
|
1 2 3 4 |
input:enabled { } input:not([disabled]) { } input:disabled { } input[disabled] { } |
Разницы нет никакой: все методы поддерживаются в IE9+, специфичность селекторов также одинаковая. Не знаю, как часто вы будете использовать эти селекторы, но мне интересно узнать про все варианты решения одной и той же задачи.
Автор: Guy Routledge
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
