Вступ до псевдокласів

1.1 Псевдокласи

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

Основні концепції псевдокласів

1. Визначення стану елемента:
   • Псевдокласи можуть вказувати на стан елемента, такий як наведення миші, фокус чи активація
2. Визначення позиції елемента:
   • Псевдокласи можуть вказувати на позицію елемента відносно його батька або інших елементів, таких як перший чи останній елемент
3. Спеціальні випадки та логічні групи:
   • Псевдокласи можуть також визначати спеціальні випадки, такі як перший елемент типу чи непарний/парний елемент

Як використовувати псевдокласи

Псевдокласи додаються до селектора за допомогою двокрапки (:). Вони можуть бути використані як із селекторами елементів, так і з класами, ідентифікаторами та іншими селекторами.

Синтаксис:

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

Приклади використання

1. Селектор елемента з псевдокласом

У цьому прикладі всі перші абзаци (<p>) всередині своїх батьківських елементів будуть жирними:

    
      p:first-of-type {
        font-weight: bold;
      }
    
  

2. Селектор класу з псевдокласом

У цьому прикладі фон усіх елементів із класом .button стане синім при наведенні курсора миші:

    
      .button:hover {
        background-color: blue;
      }
    
  

3. Комбіновані селектори з псевдокласами

У цьому прикладі всі парні абзаци (<p>) всередині елементів із класом .container будуть червоними:

    
      .container > p:nth-child(2n) {
          color: red;
      }
    
  

1.2 Приклади псевдокласів і їх застосування

1. Псевдокласи, що визначають стан

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

    
      a:link {
        color: blue;
      }

      a:visited {
        color: purple;
      }

      a:hover {
        color: red;
      }

      a:active {
        color: green;
      }
    
  

2. Псевдокласи, що визначають позицію

Псевдокласи, що визначають позицію елемента, дозволяють застосовувати стилі до елементів залежно від їхнього розташування в DOM-структурі.

    
      li:first-child {
          font-style: italic;
      }

      li:last-child {
          font-style: italic;
      }

      li:nth-child(odd) {
          background-color: #f0f0f0;
      }

      li:nth-child(even) {
          background-color: #ffffff;
      }
    
  

3. Псевдокласи для логічних груп

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

    
      input:checked {
        background-color: yellow;
      }

      input:disabled {
        background-color: grey;
      }

      input:enabled {
        background-color: white;
      }