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

Давайте начнем с изучения селекторов псевдоклассов, поскольку они лучше поддерживаются броузерами и поэтому применяются шире. Возьмем элемент a, который в HTML и XHTML устанавливает связь одного документа с другим. Конечно, эти элементы остаются сами собой, но некоторые из них ссылаются на страницы, которые уже посещались, тогда как другие указывают на страницы, на которые еще надо заглянуть. Вы не увидите разницу, просто взглянув на разметку HTML, потому что в ней все эти элементы выглядят одинаково. Единственный способ указать на то, какие ссылки посещались, – сравнить ссылки документа с хронологией броузера пользователя.

Итак, на самом деле существует два основных типа ссылок: посещенные и непосещенные. Эти типы известны как псевдоклассы (pseudo-classes), и использующие их селекторы называют селекторами псевдоклассов. Чтобы лучше понять эти классы и селекторы, посмотрим, как ведут себя броузеры по отношению к ссылкам. Согласно условным обозначениям, принятым в Mosaic, ссылки на непосещенные страницы выделены голубым цветом, а на уже посещенные – красным (в последующих броузерах, например Internet Explorer, красный цвет сменился на фиолетовый). Таким образом, если бы можно было ввести в ссылки классы, чтобы любая уже посещенная ссылка относилась бы, скажем, к классу «visited», то можно было бы написать стиль, позволяющий выделять такие ссылки красным цветом:

a.visited {color: red;}
(a href="http://www.w3.org/" class="visited">W3C Web site(/a)

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


Вместо этого CSS определяет псевдоклассы, заставляющие ссылки посещенных страниц вести себя так, как будто имя их класса – «visited»:

a:visited {color: red;}

Теперь любая ссылка, указывающая на посещенную страницу, будет красной, и не надо добавлять в них атрибуты class. Обратите внимание на двоеточие (:), присутствующее в правиле. Двоеточие, разделяющее a и visited, – это визитная карточка псевдокласса или псевдоэлемента. Все ключевые слова псевдоклассов и псевдоэлементов начинаются с двоеточия.

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

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

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