Все псевдоклассы гиперссылок, доступные в стандарте CSS 3:
-:link — непосещенная гиперссылка;
-:visited — посещенная гиперссылка;
-:active — гиперссылка, на которой посетитель в данный момент щелкает мышью;
-:focus — гиперссылка, имеющая фокус ввода (подробнее о фокусе ввода см. в
-: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 }
Этот стиль будет применен к посещенной гиперссылке, над которой находится курсор мыши.
Псевдоклассы гиперссылок — единственное средство, позволяющее указать параметры для текста гиперссылок. По крайней мере, насколько удалось выяснить автору…
Структурные псевдоклассы
Псевдоклассы: 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'>
<P>Этот абзац будет набран зеленым цветом.</P>
<BLOCKQUOTE>
<P>Этот абзац — тоже.</P>
</BLOCKQUOTE>
<BLOCKQUOTE>
<P>И этот — тоже.</P>
<P>А этот — нет.</P>
</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-страницы, который является единственным дочерним элементом, сформированном с помощью данного тега, в своем родителе.
Листинг 13.8 иллюстрирует пример.
Листинг 13.8
P: only-of-type { color: green }
.
<BLOCKQUOTE>
<P>Этот абзац будет набран зеленым цветом.</P>
</BLOCKQUOTE>
<BLOCKQUOTE>
<P>И этот абзац будет набран зеленым цветом.</P>
<ADDRESS>А этот текст — нет.</ADDRESS>
</BLOCKQUOTE>
<BLOCKQUOTE>
<P>И этот — нет.</P>
