Псевдо-елементи і класи в 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
" - перший рядок кожного параграфу.
Тобто синтаксис наступний:
селектор:псевдо-клас { //параметри }
От і все! В принципі нічого складного, а багато корисного.
Тільки авторизовані користувачі можуть додавати коментарі.