:invalidСелектор дозволяє вибрати елементи , які не містять дійсний зміст, як визначено його typeатрибутом. :invalidвизначається в специфікації CSS Selectors Level 3 як “псевдоселектор дійсності”, тобто він використовується для стилювання інтерактивних елементів на основі оцінки вводу користувача.
Цей селектор має одне особливе використання: надання користувачеві зворотного зв'язку під час взаємодії з формою на сторінці. У наведеному нижче прикладі використовується CSS, щоб перетворити поля “Електронна пошта” в червоний чи зелений колір, відповідаючи на відповідність вмісту дійсній схемі електронної адреси чи ні:
Зверніть увагу на те, як перший („Електронна пошта”) є зеленим, навіть якщо в полі немає вмісту. Це тому, що введення є необов’язковим, тож якщо залишити його пустим, це призведе до подання дійсної форми. Щоб виправити цю поведінку, другий має атрибут “required”, що означає, що порожнє поле призведе до неправильної подачі форми.
Цікаві місця
:invalidможе бути "прикутий" до інших псевдоселекторів: наприклад,:focusперевіряти лише тоді, коли користувач набирає текст,:beforeабо:afterгенерувати піктограми або текст, щоб забезпечити більше відгуків користувачів, або селектори атрибутів хотілиinput(value="")перевіряти лише поля введення, що містять вміст.
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10,0+ | 5.0+ | 4.0+ | 10,0+ | 10+ | Ні | Ні |
:invalidбув введений в модулі CSS Selectors 3, що означає, що старі версії браузерів його не підтримують. Однак сучасна підтримка браузера стає кращою. Якщо вам потрібна старіша підтримка браузера, або поліфіл, або використовуйте ці селектори некритичними способами - поступове вдосконалення, яке рекомендується.