Псевдокласи стану

Псевдокласи - це спеціальні ключові слова, які додають специфічний стиль до вибраних частин елементів сторінки, які не можна вибрати за допомогою звичайних селекторів.

Найчастіше вживані псевдокласи стану. Їх використовують для надання стилізації інтерактивним елементам при певній події. Наприклад при їх активному стані, або наведенні курсора тощо.

Синтаксис: псевдоклас вказують після двокрапки без пробілу після назви селектора.

селектор:псевдоклас {
  /* Властивості */
}

Ось кілька популярних псевдокласів стану:

:hover: Застосовує стилі до елемента, коли користувач наводить на нього курсор миші.
:active: Застосовує стилі до елемента під час натискання на нього.
:focus: Застосовує стилі до елемента, який має фокус. Наприклад, елемент отримує фокус після натискання на нього або введення з клавіатури.
:visited: Застосовує стилі до відвіданих посилань. Це допомагає користувачам розрізняти відвідані та невідвідані посилання.
:link: Застосовує стилі до невідвіданих посилань.

Є й інші псевдокласи стану, але для елементів форми: :checked, :disabled, :enabled. Вони будуть розглянуті пізніше.

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

:hover - це псевдоклас стану, який застосовує стилі до елемента, коли користувач наводить на нього курсор миші. Це дозволяє створювати інтерактивні та динамічні зміни вигляду елементів при наведенні миші на них.

Наприклад, можна зробити, щоб текст всіх посилань на сторінці змінював колір при наведенні курсора:

<a href="https://google.com">Google</a>

a {
    color: green;
}

a:hover {
    color: red;
}

Псевдоклас стану можна задавати не тільки селектору тегу, як показано вище, але і селектору класу.

<a class="main-link" href="https://google.com">Google</a>

.main-link {
    color: green;
}

.main-link:hover {
    color: red;
}

Також псевдокласи можна застосовувати до контекстних селекторів

<ul class="menu-link">
  <li><a class="link" href="/">Home</a></li>
  <li><a class="link" href="/portfolio">Portfolio</a></li>
    <li><a class="link" href="/contacts">Contacts</a></li>
</ul>

.menu-link .link {
    color: green;
}

.menu-link .link:hover {
    color: red;
}

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

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

Синтаксис псевдокласу :focus такий само як і для :hover.

<ul class="menu-link">
  <li><a class="link" href="/">Home</a></li>
  <li><a class="link" href="/portfolio">Portfolio</a></li>
    <li><a class="link" href="/contacts">Contacts</a></li>
</ul>

.menu-link .link {
    color: green;
}

.menu-link .link:focus {
    color: red;
}

Дуже часто псевдокласи стану :focus і :hover в CSS обʼєднують.

.menu-link .link:hover,
.menu-link .link:focus {
    color: red;
}

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

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

Наприклад, колір тексту посилання мінятиметься під час натискання.

<ul class="menu-link">
  <li><a class="link" href="/">Home</a></li>
  <li><a class="link" href="/portfolio">Portfolio</a></li>
    <li><a class="link" href="/contacts">Contacts</a></li>
</ul>

.menu-link .link {
    color: green;
}

.menu-link .link:hover,
.menu-link .link:focus {
    color: red;
}

.menu-link .link:active {
    color: orange;
}

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

:visited - це псевдоклас стану, який застосовує стилі до посилань, які користувач вже відвідав. Коли користувач перейшов за посиланням, воно стає "відвіданим", і для нього можна використовувати псевдоклас :visited, щоб змінити його стиль та надати візуальний зворотний зв'язок користувачеві.

<ul class="menu-link">
  <li><a class="link" href="/">Home</a></li>
  <li><a class="link" href="/portfolio">Portfolio</a></li>
    <li><a class="link" href="/contacts">Contacts</a></li>
</ul>

.menu-link .link {
    color: green;
}

.menu-link .link:hover,
.menu-link .link:focus {
    color: red;
}

.menu-link .link:active {
    color: orange;
}

.menu-link .link:visited {
    color: blue;
}

Псевдоклас :hover у таблицях

Псевдоклас :hover можна використовувати в таблицях для надання візуальних змін стилю під час наведення курсора на рядок чи комірку таблиці. Це може бути корисно для виділення активного рядка або наголошення на важливих даних при наведенні миші.

<table>
        <tr>
            <th>Стовпець 1</th>
            <th>Стовпець 2</th>
            <th>Стовпець 3</th>
        </tr>
        <tr>
            <td>Рядок 1, Стовпець 1</td>
            <td>Рядок 1, Стовпець 2</td>
            <td>Рядок 1, Стовпець 3</td>
        </tr>
        <tr>
            <td>Рядок 2, Стовпець 1</td>
            <td>Рядок 2, Стовпець 2</td>
            <td>Рядок 2, Стовпець 3</td>
        </tr>
        <tr>
            <td>Рядок 3, Стовпець 1</td>
            <td>Рядок 3, Стовпець 2</td>
            <td>Рядок 3, Стовпець 3</td>
        </tr>
    </table>

table {
   border-collapse: collapse;
}

tr:hover {
background-color: yellow;
}

th, td {
  padding: 10px;
  border: solid 1px black;
}

td:hover {
outline: 2px solid blue;
}

Нижче наведено живий приклад цього коду

Cursor

Дуже часто в інтерактивних елементах потрібно показати при наведенні, що цей елемент клікабельний. Для цього можна змінити зовнішній вигляд курсора.

Властивість cursor визначає тип курсора, який відображається, коли користувач наводить курсор миші на елемент. cursor може приймати різні значення, що вказують на різні типи курсорів. За замовчанням його значення auto, тобто браузер сам визначає тип курсора.

.main-btn {
  cursor: auto;
}

Кастомний курсор

Розробник може вказати і кастомний курсор. Для цього використовується властивість cursor, але вказується URL до зображення курсора. Ось як це можна зробити:

Створити своє кастомне зображення курсора: Можна створити власне зображення для курсора за допомогою графічного редактора або використати готове зображення. Зазвичай зображення курсора повинно бути невеликим і не перевищувати розмір в 32x32 пікселі.
Завантажити зображення у каталог проєкту.
Використати властивість cursor: Вказати URL до зображення курсора. Наприклад:

.custom-cursor {
    cursor: url('шлях_до_зображення_курсора.png'), auto;
}

У цьому прикладі custom-cursor - це клас, до якого буде застосовано кастомний курсор. Шлях до зображення курсора вказується в URL, і auto вказує, що браузер повинен вибрати альтернативний курсор, якщо зображення не може бути завантажено.

Після цього, можна додати клас custom-cursor до елементів на сторінці.

<div class="custom-cursor">
    Контент
</div>

PreviousСелектори NextКолір

Last updated 1 year ago