Очень важной особенностью CSS являются псевдоэлементы. Псевдоэлемент - это некая характеристика состояния объекта или его особенность . Например, первая буква в абзаце (особенность), наведённый курсор мыши на объект (состояние). И вот таких псевдоэлементов в CSS достаточно много. О них мы и поговорим подробно в данн...
Очень важной особенностью CSS являются псевдоэлементы. Псевдоэлемент - это некая характеристика состояния объекта или его особенность. Например, первая буква в абзаце (особенность), наведённый курсор мыши на объект (состояние). И вот таких псевдоэлементов в CSS достаточно много. О них мы и поговорим подробно в данной статье.
Псевдоэлементы в CSS позволяют задавать особый стиль для "необычных" элементов. Давайте с Вами разберём простой пример:
img:hover {
border: 2px solid #f00; // Устанавливаем красную рамку
}
Данный код означает, что вокруг изображения при наведении на него курсора мыши будет появляться красная рамка толщиной 2 пикселя. Когда же курсор мыши будет уходить с элемента, то рамка будет исчезать. Благодаря псевдоэлементам, казалось бы непростую задачу, мы решили очень легко и без использования JavaScript, что вообще прекрасно.
Все остальные псевдоэлементы в CSS используются абсолютно также, то есть селектор, двоеточие и название псевдоэлемента.
Привожу таблицу с различными псевдоэлементами в CSS и их описанием.
| Псевдоэлемент | Описание |
| active | Состояние "активной ссылки", то есть ссылка, на которую нажимают. |
| firstchild | Можно применить стиль к первому дочернему элементу. |
| first-letter | Первый символ в тексте элемента. |
| first-line | Первая строка в тексте элемента. |
| focus | Для элемента в состоянии "фокус". Например, текстовое поле, в котором сейчас набирают текст. |
| hover | Наведение на элемент курсора мыши. |
| link | Определяет состояние непосещённой ссылки. |
| visited | Определяет состояние посещённой ссылки. |
Это не все псевдоэлементы, а лишь те, которые, во-первых, во всех браузерах работают (за исключением IE6, где не всё это работает), а также постоянно используются верстальщиками. Поэтому все данные псевдоэлементы Вы должны знать прекрасно.
Надеюсь, теперь некоторые элементы Вы будете верстать с меньшим количеством тегов и свойств, а также без использования JavaScript. Успехов в освоении псевдоэлементов в CSS!
