Web-Programming.in.ua

Псевдо-елементи і класи в CSS

Привіт, в цій статті буде розказано, що ж таке псевдо-класи і псевдо-елементи в CSS. Що ж почнемо...

Вони використовуються для оформлення різних станів елементів. Найчастіше це використовують для оформлення різних станів посиляннь (наведений, натиснутий, відвіданий, і т.д.). Тому почнемо саме з цього.

  • :link – звичайний стан посилань.
  • :visited – посилання, які ви вже відвідали.
  • :focus – поле форми, в якому в даний момент знаходиться курсор клавіатури.
  • :hover – посилання, на якому в даний момент знаходиться покажчик миші.
  • :active – посилання, на якому в даний момент відбувається клацання.

Це є список станів посилання, яке вибирають вони (юзери).

Наприклад:

/* стан, коли на посилання наведено курсор миші */
a:hover {
    color: pink;
}

/* стан, коли посилання вже було відвідане */
a:visited {
    color: red;
}

/* стан коли курсор клавіатури знаходиться в полі для тексту */
textarea:focus {
    color: gray;
    border: 2px solid blue;
}

Також є ":first-child, і :last-child", які задають стиль першому і останньому відповідно.

":first-letter" - перша буква заголовку або параграфу.

":first-line" - перший рядок кожного параграфу.

Тобто синтаксис наступний:

селектор:псевдо-клас {
    //параметри
}

От і все! В принципі нічого складного, а багато корисного.

Тільки авторизовані користувачі можуть додавати коментарі.

Нагору