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

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

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

Псевдоклас :hover застосовується до елемента, коли користувач наводить на нього курсор миші.

Синтаксис:

    
      селектор:hover {
        властивості: значення;
      }
    
  

Приклад:

У цьому прикладі посилання змінює колір та додає підкреслення при наведенні курсора, а кнопка змінює колір фону та тексту.

    
      /* Стилізація посилання при наведенні */

      a:hover {
        color: red;
        text-decoration: underline;
      }

      /* Стилізація кнопки при наведенні */

      button:hover {
        background-color: #3498db;
        color: white;
      }
    
  

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

Псевдоклас :focus застосовується до елемента, коли він отримує фокус, наприклад, при натисканні на елемент форми або під час переходу до нього за допомогою клавіші Tab.

Синтаксис:

    
      селектор:focus {
        властивості: значення;
      }
    
  

Приклад:

У цьому прикладі поле введення змінює колір межі та прибирає обведення при фокусі, а текстове поле змінює колір фону.

    
      /* Стилізація поля введення при фокусі */

      input:focus {
        border-color: blue;
        outline: none;
      }

      /* Стилізація текстового поля при фокусі */

      textarea:focus {
        background-color: #f0f0f0;
      }
    
  

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

Псевдоклас :active застосовується до елемента в момент його активації користувачем, наприклад, при натисканні кнопки миші. Цей псевдоклас часто використовується для створення візуального зворотного зв'язку при натисканні на елементи інтерфейсу.

Синтаксис:

    
      селектор:active {
        властивості: значення;
      }
    
  

Приклад:

У цьому прикладі посилання змінює колір в момент натискання, а кнопка змінює колір фону та трохи зменшується, створюючи ефект натискання.

    
      /* Стилізація посилання в момент натискання */

      a:active {
        color: green;
      }

      /* Стилізація кнопки в момент натискання */

      button:active {
        background-color: #2980b9;
        transform: scale(0.98);
      }
    
  

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

Псевдоклас :visited застосовується до посилань, які користувач вже відвідував. Він дозволяє стилізувати відвідані посилання іншим чином, ніж невідвідані.

Синтаксис:

    
      селектор:visited {
        властивості: значення;
      }
    
  

Приклад

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

    
      /* Стилізація відвіданого посилання */

      a:visited {
        color: purple;
      }
    
  

2.5 Комбінування псевдокласів

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

Приклад повної реалізації

У цьому прикладі стилізація посилань змінюється залежно від їхнього стану: базовий стан, відвідані посилання, посилання при наведенні та посилання в момент натискання:

    
      /* Базовий стиль для посилань */

      a {
        color: blue;
        text-decoration: none;
      }

      /* Стилізація відвіданого посилання */

      a:visited {
        color: purple;
      }

      /* Стилізація посилання при наведенні */

      a:hover {
        color: red;
        text-decoration: underline;
      }

      /* Стилізація посилання в момент натискання */

      a:active {
        color: green;
      }