Псевдо классы и псевдо элементы.

Обзор псевдо классов и псевдо элементов в CSS.


Приветствую всех читателей блога. Сегодня рассмотрим псевдо классы и псевдо элементы в CSS. Псевдо классы - это отсутствующие в коде классы, которые появляются в результате наших действий или обработки документа. К примеру наведение курсора мыши на элемент страницы или передача фокуса элементу формы.

Псевдо классы, используемые только для гиперссылок: 

:link – для всех ссылок.
:visited – только для посещенных.
Позволяют изменять внешний вид ссылок. Поддерживается всеми браузерами.

Пожалуй, самые используемые псевдо классы, который могут быть использованы для любых элементов на странице: 

:hover – появляется при наведении курсора мыши на элемент.
В 6 IE поддерживается только для гиперссылок.
:active – появляется при нажатии левой клавиши мыши на элементе. В 6 и 7 IE поддерживается только для гиперссылок.

Для элементов у которых можно получить и убрать фокус: 

:focus – появляется при получении элементом фокуса.
Применяется для элементов форм и гиперссылок (a, area). Пример применения – появление или убирание подсказок у различных полей форм.
Для вложенных элементов:
:first-child – применяется к первому вложенному элементу.
:last-child – применяется к последнему вложенному элементу.
Достаточно полезные псевдо классы для выделения первых или последних элементов в списках или меню. К сожалению поддерживаются только современными браузерами.

Псевдо элементы.

Псевдо элементы представляют собой элементы страницы не прописанные в коде HTML и создаваемые при помощи стилей CSS. Селекторы - псевдо элементы можно писать с 2 двоеточиями, однако при этом в IE такие селекторы работать не будут. Поэтому пишем с одним, как и псевдо классы.

first-letter и first-line. 

Используются для любых элементов (блоки, параграфы, заголовки) кроме строчных (элементы с display: inline;):
:first-letter - выделение первой буквы в элементе.
:first-line - выделение первой строки в элементе.
В IE работает с версии 7.

Псевдо элементы before и after, как правило, используются для генерации контента, отсутствующего в файле HTML. 

Не поддерживаются в IE 6 и 7.
Псевдо элемент :before – формирует контент перед элементом.
Псевдо элемент :after – формирует контент после элемента.
Оба этих правила имеют обязательное правило “conntent”, которое может как иметь какой-то текст, так и оставаться пустым. Например:
р:before{content: “Какой то текст”;} или р:before{content: “ ”;}.
По умолчанию эти элементы имеют строчное представление (display: inline;). Тем не менее могут быть преобразованы как в блочные, так и в строчно–блочные. Соответственно к ним могут быть применены любые правила, используемые для таких элементов.
Пример: Заголовку H1 добавим псевдо элементы :before в обычном состоянии и при наведении курсора мыши.
h1:before{
 content: " ";
 display: inline-block;
 background: url(check1.png) 0 0 no-repeat;
 width: 60px;
 height: 60px;
 margin: 0 10px -12px 0;
}
h1:hover:before{
 content: " ";
 display: inline-block;
 background: url(check.png) 0 0 no-repeat;
 width: 60px;
 height: 60px;
 margin: 0 10px -12px 0;
}
И получим вот такую картину:


Таким образом, в случае если поддержка старых Интернет Эксплореров не является обязательным условием при создании сайта, то использование псевдо классов и псевдо элементов может быть весьма полезным и значительно украсить сайт и повысить его функционал.

Комментариев нет :

Отправить комментарий

Ваш комментарий: