Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 02.08.2026)
1449120
осіб
439
літаків
354
гелікоптерів
12231
танків
25070
ББМ
47196
артилерія
1529
ППО
1988
РСЗВ
128953
машин
34
кораблі і катери

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

07/10/2017

Псевдоклас в 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 – стилі для посилань, які вже відвідувались користувачем

 

 

 

Підтримка браузерами

Всі останні версії браузерів, включаючи Internet Explorer 9 і вище, підтримують CSS3 псевдокласи.

 

Категорії:

Перегляди 8209
розкажіть друзям:

Напишіть тут свою думку/питання

Ваша пошта не публікуватиметься. Обов’язкові поля позначені *