Категорії: CSSУроки програмування

Псевдокласи в CSS – мінімальний набір знань

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

Синтаксис:

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

приклад
.content:hover {background-color: #06a79d; }

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

:active – надає стиль активному посиланню
:checked – використовується для елементів (наприклад, checkbox і radio), коли вони відзначені
:default – задає стиль елементів форми, які встановлені за замовчуванням в групі подібних елементів
:disabled – застосовує стилі для заблокованих елементів форми
:empty – стилі для порожніх елементів (наприклад, не містять дочірніх елементів, тексту)
:enabled – стилі для доступних (не заблокованих) елементів форми
:first-child – вказує стилі для першого дочірнього елемента свого батька
:first-of-type – визначає стильові правила для першого елемента в списку дочірніх елементів свого батька
:focus – задає стиль для елемента в фокусі
:invalid – стилі для полів форми, вміст яких не відповідає вказаному типові
:hover – застосовує стиль для елемента, на який наведено курсор миші
:indeterminate – присвоює стиль для елементів форми (прапорці і перемикачі), які знаходяться в невизначеному стані (не включені і не вибрані)
:lang – цей псевдоклас вказує на мову, яка використовується в документі або його частині
:last-child – привласнює стилі останньому елементу свого батька
:last-of-type – визначає стильові правила для останнього елемента в списку дочірніх елементів свого батька
:link – стилі для посилань, які ще не відвідувалися користувачем
:not – стильові правила для елементів, які не містять вказаний селектор
:nth-child – додає стилі елементам на основі нумерації в дереві елементів
:nth-last-child – додає стилі елементам на основі нумерації в дереві елементів, відлік ведеться від останнього елемента
:nth-last-of-type – стилі для елементів зазначеного типу на основі нумерації в дереві елементів, відлік ведеться від останнього елемента
:nth-of-type – стилі для елементів зазначеного типу на основі нумерації в дереві елементів
:only-child – стилі для єдиного дочірнього елемента свого батька
:only-of-type – привласнює стилі дочірньому елементу зазначеного типу, тільки якщо він єдиний у батька
:optional – стилі для поля форми, у якого не заданий атрибут required
:readonly – стилі для поля форми, у якого заданий атрибут readonly
:read-write – стильове оформлення для полів форми, які доступні для зміни
:required – стильові правила для тега <input>, у якого встановлений атрибут required
:root – вказівка на кореневий елемент документа. У HTML – це завжди елемент <html>
:target – стилі для цільового елемента в адресному рядку браузера (#ID)
:valid – стильове оформлення полів форми, вміст яких проходить перевірку в браузері на відповідність зазначеному типу
:visited – стилі для посилань, які вже відвідувались користувачем