CSS від А до Я: як використовувати псевдоклас enabled

18

Від автора: вітаю вас в нашій серії уроків CSS від А до Я! В цій серії я розповім вам про CSS значення і властивості, які починаються з різних букв алфавіту. Іноді навчального ролика буває недостатньо, і в цій статті я дам вам кілька швидких рад по роботі з псевдоклассом :enabled.

E значить :enabled

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

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

Ці стани задаються за допомогою атрибута disabled з булевими значенням. Варто відзначити, що атрибута enabled немає, а псевдоклас :enabled є.

Тобто елементи можна стилізувати як за їх псевдоклассам за допомогою селектора атрибута, так і за заперечення цього селектора:

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

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