Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке псевдоклас? Які псевдокласи ви знаєте?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Псевдоклас** - це спеціальний селектор, який описує стан елемента (наприклад, `:hover`, `:focus`, `:checked`) або його положення в дереві (`:first-child`, `:nth-child()`), без додавання класів у HTML. **Ключове:** псевдокласи роблять CSS гнучкішим і динамічнішим, дозволяючи стилізувати елемент залежно від стану чи позиції без зміни розмітки.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Псевдоклас**, це спеціальний селектор, який описує **стан елемента**, а не сам елемент. Він спрацьовує в момент певної події або за певного положення елемента в структурі, **без додавання класів у HTML**. Приклад: ```css a:hover { color: red; } ``` `hover`, псевдоклас, який застосовується в момент наведення курсора. --- ### **Групи псевдокласів і приклади** #### **1) Стани користувача** | Псевдоклас | Коли спрацьовує | |---|---| | `:hover` | при наведенні курсора | | `:active` | при натисканні | | `:focus` | при фокусі на елементі (клавіатура або курсор) | | `:visited` | відвідане посилання | | `:link` | посилання, на яке ще не клікали | --- #### **2) Положення в дереві (структурні)** | Псевдоклас | Опис | |---|---| | `:first-child` | перша дитина в батьківському елементі | | `:last-child` | остання дитина | | `:nth-child(n)` | вибір за номером | | `:nth-of-type(n)` | номер серед елементів певного типу | | `:first-of-type`, `:last-of-type` | перший/останній елемент потрібного типу | --- #### **3) Стани форми** | Псевдоклас | Опис | |---|---| | `:checked` | позначений checkbox або radio | | `:disabled` | вимкнений елемент форми | | `:enabled` | доступний елемент | | `:required`, `:optional` | обов'язкові/необов'язкові поля | | `:valid`, `:invalid` | проходить/не проходить валідацію | --- #### **4) Інші корисні псевдокласи** | Псевдоклас | Опис | |---|---| | `:not(selector)` | виключення селектора | | `:root` | кореневий елемент (`html`) | | `:empty` | елемент без вмісту | | `:target` | елемент, на який посилається `#hash` в URL | --- ### **Підсумок** **Псевдокласи дозволяють стилізувати елемент залежно від його стану чи положення без зміни HTML-коду.** Це робить CSS гнучкішим і динамічнішим. Якщо хочеш, можу наступним питанням розібрати псевдоелементи і показати, чим вони відрізняються від псевдокласів.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.