HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

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

Псевдоэлементы — разновидность специальных селекторов, привязывающих стиль к определенному фрагменту элемента Web-страницы. Таким фрагментом может быть первый символ или первая строка в абзаце.

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

<основной селектор><псевдоэлемент> { <стиль> }

Псевдоэлемент::first-letter привязывает стиль к первой букве текста в элементе Web-страницы, если ей не предшествует встроенный элемент, не являющийся текстом, например, изображение.

Пример:

P::first-letter { font-size: larger }

Этот стиль будет привязан к первой букве абзаца.

Псевдоэлемент::first-line привязывает стиль к первой строке текста в элементе

Web-страницы:

P::first-line { text-transform: uppercase }

Данный стиль будет привязан к первой строке абзаца.

Псевдоклассы

Псевдоклассы — самая мощная разновидность специальных селекторов. Они позволяют привязать стиль к элементам Web-страницы на основе их состояния (наведен на них курсор мыши или нет) и местоположения в родительском элементе.

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

<основной селектор><псевдокласс> { <стиль> }

Псевдоклассы, в свою очередь, сами делятся на группы. Каждой из них мы посвятим отдельный раздел.

Псевдоклассы гиперссылок

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

Все псевдоклассы гиперссылок, доступные в стандарте CSS 3:

– :link — непосещенная гиперссылка;

– :visited — посещенная гиперссылка;

– :active — гиперссылка, на которой посетитель в данный момент щелкает мышью;

– :focus — гиперссылка, имеющая фокус ввода (подробнее о фокусе ввода см. в главе 6);

– :hover — гиперссылка, на которую наведен курсор мыши.

Псевдоклассы гиперссылок применяются совместно со стилями, задающими параметры для гиперссылок. Это могут быть стили переопределения тега <A> или комбинированные стили, созданные на основе стиля переопределения тега <A> (листинг 13.5).

Листинг 13.5

A: link { text-decoration: none }

A: visited { text-decoration: overline }

A: active { text-decoration: underline }

A: focus { text-decoration: underline }

A: hover { text-decoration: underline }

В листинге 13.5 псевдоклассы гиперссылок действуют совместно со стилями переопределения тега <A>. В результате приведенные стили будут применены ко всем гиперссылкам на Web-странице.

Листинг 13.6

A.special: link { color: darkred }

A.special: visited { color: darkviolet }

A.special: active { color: red }

A.special: focus { color: red }

A.special: hover { color: red }

В листинге 13.6 псевдоклассы гиперссылок совмещены с комбинированными стилями, объединяющими стиль переопределения тега <A> и стилевой класс special. Они будут применены только к тем гиперссылкам, к которым был привязан указанный стилевой класс.

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

A: visited: hover { text-decoration: underline }

Этот стиль будет применен к посещенной гиперссылке, над которой находится курсор мыши.

Псевдоклассы гиперссылок — единственное средство, позволяющее указать параметры для текста гиперссылок. По крайней мере, насколько удалось выяснить автору…

Структурные псевдоклассы

Структурные псевдоклассы позволяют привязать стиль к элементу Web-страницы на основе его местоположения в родительском элементе.

Псевдоклассы: first-child и: last-child привязывают стиль к элементу Web-страницы, который является, соответственно, первым и последним дочерним элементом своего родителя:

UL: first-child { font-weight: bold }

Этот стиль будет применен к пункту, являющемуся первым дочерним элементом своего родителя-списка, т. е. к первому пункту списка.

Пример:

TD: last-child { color: green }

Данный стиль будет применен к последнему дочернему элементу каждой строки таблицы — к ее последней ячейке.

Листинг 13.7 иллюстрирует более интересный случай.

Листинг 13.7

#cmain P: first-child { font-weight: bold }

.

<DIV ID="cmain">

Этот абзац будет набран зеленым цветом.

<BLOCKQUOTE>

Этот абзац — тоже.

</BLOCKQUOTE>

<BLOCKQUOTE>

И этот — тоже.

А этот — нет.

</BLOCKQUOTE>

</DIV>

Стиль, приведенный в листинге 13.7, будет применен к самому первому абзацу, единственному абзацу в первой большой цитате и первому абзацу во второй большой цитате. Дело в том, что последние два абзаца, к которым будет применен стиль, отсчитываются относительно своих родителей — больших цитат — и в них являются первыми.

А если мы изменим данный стиль вот так:

#cmain > P: first-child { font-weight: bold }

он будет применен только к самому первому абзацу, непосредственно вложенному в контейнер cmain. Ведь мы указали комбинатор >, который предписывает, чтобы элемент, к которому применяется стиль, должен быть непосредственно вложен в своего родителя.

НА ЗАМЕТКУ

Стандарт CSS также описывает псевдоклассы: first-of-type и: last-of-type. Насколько удалось выяснить автору, они работают так же, как и псевдоклассы: first- child и: last-child, которые мы только что изучили. По крайней мере, в текущей реализации поддержки CSS 3…

Псевдокласс: only-of-type привязывает стиль к элементу Web-страницы, который является единственным дочерним элементом, сформированном с помощью данного тега, в своем родителе.