Що таке псевдоклас? Які псевдокласи ви знаєте?
Псевдоклас, це спеціальний селектор, який описує стан елемента, а не сам елемент. Він спрацьовує в момент певної події або за певного положення елемента в структурі, без додавання класів у 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 гнучкішим і динамічнішим.
Якщо хочеш, можу наступним питанням розібрати псевдоелементи і показати, чим вони відрізняються від псевдокласів.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.