Псевдокласи

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

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

Основні псевдокласи:

• Псевдокласи стану
• Псевдокласи структурного стану
• Псевдокласи форми
• Псевдокласи навігації

Синтаксис:

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

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

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

• :hover — застосовується, коли користувач наводить курсор на елемент
• :active — застосовується, коли елемент активовано (зазвичай при натисканні)
• :focus — застосовується, коли елемент у фокусі (наприклад, при використанні клавіатури)
• :visited — застосовується до відвіданих посилань
• :link — застосовується до невідвіданих посилань

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

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

Синтаксис:

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

Приклад:

Цей селектор змінює колір тексту і підкреслює посилання при наведенні вказівника миші.

    
      <a href="#">Посилання-заглушка</a>
    
  

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

Застосування:

• Покращує взаємодію з користувачем (UI) завдяки візуальному зворотному зв’язку
• Використовується для кнопок, посилань та інших інтерактивних елементів

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

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

Синтаксис:

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

Приклад:

Цей селектор змінює колір рамки інпуту та прибирає обводку при отриманні фокуса.

    
      <input type="text" name="text" id="text">
    
  

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

Застосування:

• Покращує доступність (accessibility) веб-сторінок
• Робить інтерактивні елементи більш помітними при фокусуванні

7.4 Псевдоклас nth-child

Псевдоклас :nth-child застосовується до елементів на основі їх положення серед дочірніх елементів батька. Він приймає аргумент, який може бути числом, ключовим словом або виразом.

Синтаксис:

    
      селектор:nth-child(n) {
        властивість: значення;
        властивість: значення;
      }
    
  

Приклад:

Цей селектор дозволяє застосовувати стилі до елементів на основі їх позиції серед братів і сестер.

    
      <ul>
        <li>Елемент 1</li>
        <li>Елемент 2</li>
        <li>Елемент 3</li>
        <li>Елемент 4</li>
        <li>Елемент 5</li>
        <li>Елемент 6</li>
        <li>Елемент 7</li>
      </ul>
    
  

    
      /* Застосовує стилі до всіх непарних дочірніх елементів */
      li:nth-child(odd) {
          background-color: lightgray;
      }

      /* Застосовує стилі до всіх парних дочірніх елементів */
      li:nth-child(even) {
          background-color: lightblue;
      }

      /* Застосовує стилі до другого дочірнього елемента */
      li:nth-child(2) {
          color: red;
      }
    
  

Застосування:

• Стилизує рядки таблиць, елементи списків та інші повторювані структури
• Дозволяє створювати складні макети та стилізацію без додавання додаткових класів

7.5 Приклади використання псевдокласів

    
      <button type="button">Кнопка</button>
    
  

    
      button:hover, button:focus {
        background-color: darkblue;
        color: white;
      }
    
  

Стилізація парних рядків таблиці:

    
      <table>
        <tr>
          <th>Назва</th>
          <th>Кількість</th>
          <th>Ціна</th>
        </tr>
        <tr>
          <td>Товар 1</td>
          <td>5</td>
          <td>10 грн.</td>
        </tr>
        <tr>
          <td>Товар 2</td>
          <td>3</td>
          <td>15 грн.</td>
        </tr>
        <tr>
          <td>Товар 3</td>
          <td>8</td>
          <td>7 грн.</td>
        </tr>
      </table>
    
  

    
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
    
  

Виключення певних елементів із загального стилю:

    
      <ul>
        <li class="list-item">Елемент 1</li>
        <li class="list-item">Елемент 2</li>
        <li class="list-item">Елемент 3</li>
        <li class="list-item">Елемент 4</li>
        <li class="list-item">Елемент 5</li>
        <li class="list-item">Елемент 6</li>
        <li class="list-item">Елемент 7</li>
      </ul>
    
  

    
      .list-item:not(:last-child) {
        border-bottom: 1px solid #ddd;
      }