Псевдокласи
Псевдоклас CSS – це ключове слово, додане до селектора, що дає змогу стилізувати конкретний стан вибраного елемента (чи елементів). Наприклад, псевдоклас :hover може використовуватися для кнопки, коли вказівник користувача наведено на неї, і ця вибрана кнопка може бути стилізована.
/* Будь-яка кнопка, над якою перебуває вказівник користувача */
button:hover {
color: blue;
}
Псевдоклас складається з двокрапки (:), після якої стоїть назва псевдокласу (наприклад, :hover). Функційні псевдокласи також вміщають пару дужок для визначення своїх аргументів (наприклад, :dir()). Елемент, до якого прикріплено псевдоклас, визначається як якірний елемент (наприклад, button у випадку button:hover).
Псевдокласи дають змогу застосовувати стиль до елемента не лише на основі вмісту дерева документа, а й також на основі зовнішніх чинників, як от: історії навігатора (наприклад, :visited), стану його вмісту (наприклад, :checked для деяких елементів форми) або положення миші (наприклад, :hover, який дозволяє визначити, чи перебуває миша над елементом, чи ні).
[!NOTE] На противагу псевдокласам, псевдоелементи можуть використовуватися для стилізації конкретної частини елемента.
Псевдокласи стану виведення елементів
Завдяки цим псевдокласам можливий вибір елементів на основі стану їхнього виведення.
:fullscreenДає збіг з елементами, що наразі перебувають у повноекранному режимі.
:modalДає збіг з елементами, що перебувають у стані, в якому вони виключають взаємодію з елементами поза ними, поки їхня власна взаємодія не буде закінчена.
:picture-in-pictureДає збіг з елементами, що наразі перебувають у стані картинки-в-картинці.
Псевдокласи полів
Ці псевдокласи стосуються елементів форми та дають змогу вибирати елементи на основі атрибутів HTML і стану, який поле має до та після взаємодії.
:autofillДає збіг з елементами
<input>, які автоматично заповнив браузер.:enabledПредставляє елемент користувацького інтерфейсу, що перебуває у ввімкненому стані.
:disabledПредставляє елемент користувацького інтерфейсу, що перебуває у вимкненому стані.
:read-onlyПредставляє елементи, що не можуть бути змінені користувачем.
:read-writeПредставляє всі елементи, що можуть бути змінені користувачем.
:placeholder-shownДає збіг з елементом-полем, що виводить текст заповнювача. Наприклад, він дасть збіг з атрибутом
placeholderелементів<input>і<textarea>.:defaultДає збіг з одним або багатьома елементами користувацького інтерфейсу, що є усталеними серед свого набору.
:checkedДає збіг, коли елементи штибу полів для галочки та радіокнопок – увімкнені.
:indeterminateДає збіг з елементами користувацького інтерфейсу, коли вони перебувають у невизначеному стані.
:blankДає збіг з елементами користувацького інтерфейсу, що є порожніми, вміщаючи порожній рядок або інший нульовий вміст.
:validДає збіг з елементами, що мають дійсний вміст. Наприклад, елемент-поле з типом 'email', що вміщає коректно сформовану адресу електронної пошти, чи порожнє значення, якщо цей контрольний елемент є необов'язковим.
:invalidДає збіг з елементами, що мають недійсний вміст. Наприклад, елемент-поле з типом 'email', у який ввели ім'я.
:in-rangeЗастосовується до елементів, що мають обмеження діапазону. Наприклад, елемента-повзуна, коли вибране значення перебуває в дозволеному діапазоні.
:out-of-rangeЗастосовується до елементів, що мають обмеження діапазону. Наприклад, елемента-повзуна, коли вибране значення перебуває поза межами дозволеного діапазону.
:requiredДає збіг, коли елемент форми є обов'язковим.
:optionalДає збіг, коли елемент форми є необов'язковим.
:user-validПредставляє елемент із коректним введенням, але лише тоді, коли користувач уже з ним взаємодіяв.
:user-invalidПредставляє елемент з некоректним введенням, але лише тоді, коли користувач взаємодіяв з цим полем.
Лінгвістичні псевдокласи
Ці псевдокласи відображають мову документа та дають змогу вибирати елементи на основі мови або напрямку письма.
:dir()Псевдоклас напрямку вибирає елементи на основі їхнього напрямку письма, визначеного мовою документа.
:lang()Вибирає елементи на основі мови їхнього вмісту.
Псевдокласи місця
Ці псевдокласи стосуються посилань, а також цільових елементів у поточному документі.
:any-linkДає збіг з елементом, якщо він дає збіг або з
:link, або з:visited.:linkДає збіг з посиланнями, що ще не були відвідані.
:visitedДає збіг з посиланнями, що вже були відвідані.
:local-linkДає збіг з посиланнями, чий абсолютний URL – такий же, як цільовий URL. Наприклад, посилання-якорі на ту саму сторінку.
:targetДає збіг з елементами, чия ціль – URL документа.
:target-withinДає збіг з елементами, що є ціллю URL документа, а також елементами, що мають нащадка, який є ціллю URL документа.
:scopeПредставляє елементи, що є опорною точкою, відносно якої відбувається вибірка елементів.
Псевдокласи стану ресурсів
Ці псевдокласи застосовуються до мультимедійних елементів, що здатні мати стан, що описується як відтворення, наприклад, відео.
:playingПредставляє мультимедійний елемент, здатний відтворюватися, коли цей елемент відтворюється.
:pausedПредставляє мультимедійний елемент, здатний відтворюватися, коли цей елемент призупинений.
Псевдокласи часового виміру
Ці псевдокласи застосовуються, коли переглядається щось, що має хронометраж, наприклад, доріжка субтитрів WebVTT.
:currentПредставляє елемент або його предка, що відображається.
:pastПредставляє елемент, що повністю передує елементу
:current.:futureПредставляє елемент, що повністю слідує за елементом
:current.
Псевдокласи деревної структури
Ці псевдокласи стосуються положення елемента в межах дерева документа.
:rootПредставляє елемент, що є коренем документа. У HTML це зазвичай елемент
<html>.:emptyПредставляє елементи, що не мають нащадків, крім пробільних символів.
:nth-childВикористовує запис
An+Bдля вибору елементів зі списку взаємно сестринських елементів.:nth-last-childВикористовує запис
An+Bдля вибору елементів зі списку взаємно сестринських елементів, рахуючи з його кінця.:first-childДає збіг з елементом, що є першим серед своїх сестер.
:last-childДає збіг з елементом, що є останнім серед своїх сестер.
:only-childДає збіг з елементом, що не має сестер. Наприклад, пункт списку, в якому немає інших пунктів.
:nth-of-typeВикористовує запис
An+Bдля вибору елементів зі списку взаємно сестринських елементів, що мають певний тип.:nth-last-of-typeВикористовує запис
An+Bдля вибору елементів зі списку взаємно сестринських елементів, що мають певний тип, рахуючи з його кінця.:first-of-typeДає збіг з елементом, що є першим серед своїх сестер, а також дає збіг з певним селектором типу.
:last-of-typeДає збіг з елементом, що є останнім серед своїх сестер, а також дає збіг з певним селектором типу.
:only-of-typeДає збіг з елементом, що не має сестер, які відповідали б обраному селекторові типу.
Псевдокласи користувацьких дій
Ці псевдокласи потребують певної взаємодії з боку користувача, щоб застосуватися, наприклад, утримання вказівника миші над елементом.
:hoverДає збіг, коли користувач виділяє елемент за допомогою пристрою-вказівника, наприклад, утримує вказівник миші над елементом.
:activeДає збіг, коли елемент активується користувачем. Наприклад, коли цей елемент клацнуто.
:focusДає збіг, коли елемент має фокус.
:focus-visibleДає збіг, коли елемент має фокус, і агент користувача визначає, що елемент має бути візуально позначений як сфокусований.
:focus-withinДає збіг з елементом, до якого застосовується
:focus, а також з будь-яким елементом, що має нащадка, до якого застосовується:focus.
Функційні псевдокласи
Ці псевдокласи приймають як параметр список селекторів або поблажливий список селекторів.
:is()Псевдоклас збігу-з-чим-небудь дає збіг з усіма елементами, що дають збіг щонайменше з одним селектором з переданого списку. Цей список є поблажливим.
:not()Псевдоклас заперечення, або збігу-ні-з-чим, представляє всі елементи, що не представлені його аргументом.
:where()Псевдоклас підлаштування специфічності дає збіг з усіма елементами, що дають збіг з будь-яким з селекторів у переданому списку, не додаючи жодної ваги специфічності. Цей список є поблажливим.
:has()Псевдоклас відношення представляє елемент, якщо будь-який з відносних селекторів дає збіг, коли він прив'язаний до приєднаного елемента.
Синтаксис
selector:pseudo-class {
property: value;
}
Подібно до звичайних класів, можна створювати ланцюжки з такої кількості псевдокласів, якої потрібно, в межах одного селектора.
Алфавітний покажчик
Серед псевдокласів, визначених набором специфікацій CSS:
A
B
C
D
E
F
H
I
L
M
N
O
P
R
S
T
U
V
W
Специфікації
| Специфікація |
|---|
|
HTML Standard (HTML) # pseudo-classes |
|
Selectors Level 4 (Selectors 4) |
|
CSS Basic User Interface Module Level 4 (CSS User Interface 4) |