Псевдоэлементы в 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!
-
Создано 06.06.2012 13:34:27
-
Михаил Русаков
Комментарии (10):
Михаил, а если для какого-то определенного изображения рамка не нужна. Как отменить стиль в определенном месте?
Ответить
border: none;
Ответить
К сожалению, IE поддерживает hover только для элемента a (то есть ссылки). Для создания элементов меню все равно пришлось писать JavaScript - функции для onmouseover (и out, конечно). А это, в свою очередь, не работает в мозилле. Так что пришлось в PHP проверять браузер и подсовывать или CSS стиль, или JavaScript. Если знаешь как обойти проблему, пожалуйста напиши.
Ответить
hover прекрасно работает в IE7 и старше, этого достаточно. Писать из-за одного IE6 скрипты - это лишнее.
Ответить
Я помогаю жене делать сайт для школьных учителей, а многие из них не способны даже установить новый браузер и пользуются IE, имеющийся в Windows. С этим приходится считаться.
Ответить
Владимир Евсеев, В PHP проверяете браузер клиента? Научите :)
Ответить
if ( stristr($_SERVER['HTTP_USER_AGENT'], 'MSIE') ){ }else{ } Проверяем, IE или нет.
Ответить
Михаил, а как применить стиль к последнему элементу списка? мне нужно от него поставить отступ справа
Ответить
Пометить его class="last", а дальше li.last { }
Ответить
При позиционировании классы и айди безсильны, я пробовал, ладно попробую разобратся сам
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.