Вивчайте Покращення Стилів за Допомогою Псевдокласів Дій Користувача

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

Синтаксис виглядає так:

selector:pseudo-class {
  property: value;
}

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

Примітка

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

:hover

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

index.html

styles.css

:focus

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

Відмінність між :hover та :focus

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

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

index.html

styles.css

:active

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

index.html

styles.css

:visited

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

index.html

styles.css

1. Який псевдоклас активується, коли користувач наводить курсор миші на елемент?

2. Який псевдоклас застосовується до посилання, яке вже було відвідано?

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 1. Розділ 6

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you explain more about how to use :hover and :focus together?

What are some best practices for styling interactive elements with these pseudo-classes?

Can you show examples of using :active and :visited as well?

Awesome!

Completion rate improved to 2.56

Свайпніть щоб показати меню

Синтаксис виглядає так:

selector:pseudo-class {
  property: value;
}

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

Примітка

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

:hover

index.html

styles.css

:focus

Відмінність між :hover та :focus

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

index.html

styles.css

:active

index.html

styles.css

:visited

index.html

styles.css

1. Який псевдоклас активується, коли користувач наводить курсор миші на елемент?

2. Який псевдоклас застосовується до посилання, яке вже було відвідано?

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 1. Розділ 6