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

CSS2.1 определяет два псевдокласса, которые применяются только к гиперссылкам. В HTML и XHTML 1.0 и 1.1 это любые элементы a, у которых есть атрибут href; в языках XML это любые элементы, которые действуют как ссылки на другие ресурсы. В конце концов, ссылка либо была посещена, либо нет, правильно? В этом случае все, что должно нам понадобиться, это:

a {color: blue;}
a:visited {color: red;}

Хотя этот формат кажется приемлемым, на самом деле его не вполне достаточно. Первое из приведенных здесь правил применяется не только к непосещенным ссылкам, но и к целевым связям, таким как:

(a name="section4">4. Жизнеописание мангустов(/a)

Результирующий текст будет синим, потому что элемент a будет соответствовать правилу a {color: blue;}, как показано выше. Поэтому, чтобы избежать применения стилей вашей ссылки к целевым связям, используйте псевдокласс :link:

a:link {color: blue;} /* непосещенные ссылки выделены голубым */
a:visited {color: red;} /* посещенные ссылки выделены красным */

Как вы, возможно, уже поняли, селекторы псевдоклассов :link и :visited в функциональном плане эквивалентны двум атрибутам body: link и vlink.


Предположим, автор хочет, чтобы все ссылки на непосещенные страницы были выделены фиолетовым цветом, а ссылки на посещенные страницы были серебряными. В HTML 3.2 это можно было определить следующим образом:


В CSS тот же эффект достигается так:

a:link {color: purple;}
a:visited {color: silver;}

В случае с псевдоклассами CSS, конечно же, можно применить не только цвета. Скажем, вы хотите, чтобы посещенные ссылки выделялись перечеркнутым курсивом серебряного цвета. Это делается с помощью следующих стилей:

a:visited {color: silver; text-decoration: line-through; font-style: italic;}

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

(a href="http://www.mysite.net/">Моя начальная страница(/a)
(a href="http://www.site.net/" class="external">Другая начальная страница(/a)

Чтобы применить к внешней ссылке ее собственные стили, достаточно
такого правила:

a.external:link, a.external:visited {color: maroon;}

Это правило сделает вторую ссылку предыдущей разметки красно-коричневой, тогда как первая ссылка будет сохранять стандартный для гиперссылок цвет (обычно синий).
Аналогичный синтаксис применяется и для селекторов идентификаторов:

a#footer-copyright:link{font-weight: bold;}
a#footer-copyright:visited {font-weight: normal;}

Хотя псевдоклассы :link и :visited очень полезны, они также статичны: обычно они не меняют стилевого оформления документа во время его просмотра.


В CSS2.1 есть другие псевдоклассы, которые не настолько статичны.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Выбор дочерних элементов
Выбор конкретного атрибута
Выбор между селектором классов и селектором идентификаторов
Выбор на основании конкретного значения атрибута
Выбор первого дочернего элемента

Вернуться в раздел: CSS / 2. Селекторы