Псевдокласи стану
Псевдокласи стану використовуються для визначення стилів для елементів в залежності від їхнього стану або взаємодії з користувачем. Елементи форми мають специфічні псевдокласи стану. Хоча ховер і фокус до них так само можна застосовувати.
:enabled і :disabled
Псевдокласи :enabled і :disabled використовують для вибору елементів форми, які відповідають за вмикання (enabled) або вимикання (disabled). Ці псевдокласи дозволяють стилізувати активні та вимкнені елементи форми відповідно. Застосовують до елементів <input>, <select> і <button>.
Елементи з атрибутом disabled не отримують ефект фокусу, а також ігнорують кліки миші. Це можна використовувати, наприклад для того, щоб заборонити надсилання форми, доки не заповнені всі поля. Це вже налаштовують за допомогою JavaScript.
:checked
Псевдоклас :checked використовують для вибору елементів форми, які знаходяться у вибраному стані. Це можуть бути радіокнопки (<input type="radio">), прапорці (<input type="checkbox">) або елементи <option> в елементі <select>, які були вибрані користувачем.
Можна застосовувати стилі й до мітки вибраного поля. Для цього використовують селектор + коли мітка <label> і <input> є сусідами.
:in-range і :out-of-range
Псевдокласи :in-range і :out-of-range використовують для вибору елементів форми, які мають значення, яке знаходиться у визначеному діапазоні (:in-range) або за його межами (:out-of-range). Ці псевдокласи можуть бути корисними для стилізації елементів форми в залежності від введених користувачем значень.
Застосовуються до елементів <range>, <number> і <date>, якщо у них вказані атрибути min і max.
Якщо значення в полі порожнє, або знаходиться в межах встановлених атрибутами min і max, то застосується стиль :in-range, а інакше :out-of-range.
:required і :optional
Псевдокласи :required і :optional використовують для вибору елементів форми в залежності від того, чи вони є обов'язковими для заповнення (:required) або необов'язковими (:optional). Останній псевдоклас застосовується рідко.
:valid і :invalid
Псевдокласи :valid і :invalid використовують для вибору елементів форми, які мають вірно (:valid) або невірно (:invalid) введені дані відповідно до їхнього атрибута pattern або валідаційної логіки.
:placeholder-shown
Псевдоклас :placeholder-shown використовують для вибору елементів форми, які відображають плейсхолдер (заглушку) у введеному тексті. Псевдоклас :placeholder-shown застосовується до елементів, які показують текст плейсхолдера, коли поле вводу порожнє і не має фокусу.
::placeholder
Селектор ::placeholder використовують для стилізації тексту плейсхолдера в елементах форми, які можуть містити плейсхолдери (<input>, <textarea>).
Композиція псевдокласів
В CSS можна комбінувати псевдокласи для точного вибору елементів, які задовольняють кілька умов одночасно. Це виконується шляхом простого вказання кількох псевдокласів в рядку без пробілів між ними.
Наприклад, якщо ви хочете вибрати елемент форми, який є обов'язковим для заповнення і має фокус, ви можете використовувати комбінацію псевдокласів :required і :focus:
input:required:focus {
border-color: red;
}За допомогою цієї техніки можна розв'язувати проблему застосування стилів до введення значень. Для цього використовують комбінацію декількох псевдокласів в одному селекторі.
Далі селектор, який застосовується тільки, коли в поле щось ввели. Доки поле порожнє і видно плейсхолдер - стилі не застосовуються.
.form-input:not(:placeholder-shown):required:valid {
/* опис стилів */
}Якщо елемент обов'язковий для заповнення - :required.
Введене значення валідне - :valid.
Текст плейсхолдера не видно - :not(:placeholder-shown).
Тільки-но щось буде введено, то зникне плейсходлер. Застосується валідація і селектор до елемента. При цьому обов'язково, щоб в елемента був атрибут placeholder, який має хоча б пробіл, але не порожнє значення.
:focus-within
:focus-within - це псевдоклас, який вибирає батьківський елемент, який має фокус в середині нього. Це означає, що стилі будуть застосовані до батьківського елемента, якщо будь-який з його дочірніх елементів має фокус.
Last updated