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

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

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

selector:pseudo-class {
  property: value;
}

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

Примітка

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

:hover

Спрацьовує, коли користувач наводить курсор миші на елемент. Використовується для створення інтерактивного візуального зворотного зв'язку.

index.html

styles.css

:focus

Активується, коли елемент отримує фокус з клавіатури (зазвичай через клавішу Tab). Для забезпечення доступності стилі наведення та фокусу часто поєднують, щоб користувачі миші та клавіатури мали однаковий досвід.

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

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

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

index.html

styles.css

:active

Застосовується під час активації елемента, зазвичай під час натискання мишею на кнопки або посилання.

index.html

styles.css

:visited

Застосовується до посилань після того, як користувач уже відвідав їхню адресу. Браузери зазвичай відображають непереглянуті посилання синім кольором, а відвідані — фіолетовим, якщо ці стилі не перевизначені вручну.

index.html

styles.css

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

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

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

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

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

Запитати АІ

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

Suggested prompts:

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

What are some best practices for styling navigation links with pseudo-classes?

Could you show examples of using :active and :visited with links?

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

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

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