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

 



 

 

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

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

 



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

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