Псевдоклассы и псевдоэлементы помогают решать задачи, которые обычным способом достигнуть труднее или невозможно. Иногда можно обойтись без их использования, но при доскональной настройки стилей они широко применяются веб-разработчиками. Кроме функциональных отличий - псевдоэлементы добавляются к селекторам по отдельности, а псевдоклассов может быть несколько в одном селекторе. Из статьи вы узнаете о наиболее популярных псевдоклассах и псевдоэлементах.
Псевдоклассы
Псевдоклассы предназначены для получения различных динамических эффектов при изменении элементов, которые могут меняться со временем или в результате действий пользователей. При записи в CSS-файле псевдоклассы имеют вид:
селектор:псевдокласс {значения} => a:hover{color:red}
Если перед псевдоклассом не указывать селектор, то его значения применятся ко всем элементам.
Наиболее распространенные псевдоклассы:
- target - для перехода к выбранному фрагменту документа, в адресе после # указывается имя идентификатора
- root - определение корневого элемента документа
- active - при активации элемента пользователем
- focus - при клике на объект, например поле для ввода данных
- hover - активация элемента при наведении на него
- link - стиль к не посещенным ссылкам
- visited - стилевое оформление к посещенным ссылкам
- indeterminate - стиль для флажков (radio) и переключателей (checkbox) в неопределенном состоянии
- checked - стиль для radio и checkbox для в выбранном положении: input:checked {color:red}
- first-child - стиль для первого дочернего элемента селектора
- last-child - изменения в последнем элементе родителя
- only-child - для дочерних элементов, единственных у родителя
- lang (en) - определение языка элемента, где en - выбранный язык
Пример: a:hover {color:red}
Сохранив эту запись в файле стилей, на сайте при наведении на ссылку, она будет менять цвет на красный.
Псевдоэлементы
Предназначены для задания стилевого оформления элементам, которые не определены среди элементов документа. Псевдоэлементы способны генерировать содержимое, которого нет в исходном коде текста. Записываются псевдоэлементы в таком же виде, как и псевдоклассы:
селектор:псевдоэлемент {значения}
Наиболее применяемые псевдоэлементы:
- after - установка указанного слова (предложения) после текста: div:after {content:"Подпись"}
- before - аналогично с after, но запись впереди текста
- first-letter - определение стиля первой буквы в контенте
- first-line - стилевое оформление первой строки в тексте
- selection - применение стилей к выделенному тексту
Пример:
Сохранив эту запись в файле стилей, на сайте перед элементом с классом new, мы увидим красный текст Внимание!
