Псевдокласи Дій Користувача

Псевдокласи Дій Користувача стилізують інтерактивний елемент на основі його поточного стану. Це допомагає заохочувати користувачів і повідомляти їм про те, що щойно відбулося. Зазвичай ми додаємо псевдокласи стану до елементів <button> та <a>.

Синтаксис наступний:

• selector - може бути будь-яким селектором, який ми розглядали в попередніх розділах;
• pseudo-class - потребує : перед своїм оголошенням, і ми не додаємо пробіл;

Примітка

Ми розглянемо найбільш корисні псевдокласи станів (hover, focus, active і visited).

Псевдоклас :hover

Псевдоклас :hover використовується для реагування на дії користувача, коли він взаємодіє з елементом за допомогою вказівника, наприклад, наведення вказівника миші на елемент. Ми можемо протестувати це у наступному прикладі, навівши вказівник миші на елементи button та a, щоб побачити ефект.

Псевдоклас :focus

Псевдоклас :focus функціонує подібно до псевдокласу :hover. Він реагує на фокус елемента, який зазвичай досягається за допомогою клавіатурної навігації за допомогою клавіші "Tab". Щоб забезпечити узгодженість поведінки інтерактивних елементів для всіх користувачів, рекомендується використовувати обидва псевдокласи разом для стилізації. Таким чином, користувачі, які здійснюють навігацію за допомогою миші та клавіатури, можуть отримати однаковий досвід.

Різниця між :hover та :focus

• :hover реагує на наведення курсору миші;
• :focus реагує на активність клавіатури (клавіша "Tab");

У наступному прикладі ми маємо один і той самий елемент з різними псевдокласами. Зверніть увагу на файл index.css. Можна помітити, що ми можемо додати однакові стилі для ефекту наведення і фокусування, розділивши селектор і псевдоклас за допомогою ,.

Псевдо-клас :active

:active спрацьовує, коли елемент активується, наприклад, при натисканні на посилання. Хоча будь-який елемент може бути активованим, цей псевдоклас зазвичай використовується для посилань і кнопок.

Псевдоклас :visited

Псевдоклас :visited застосовується до посилань, які були відвідані. За замовчуванням посилання відображаються синім кольором і змінюються на фіолетовий, коли їх відвідують.