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

С помощью селекторов псевдоклассов можно задавать стили для элементов в зависимости от их текущего состояния в HTML-документе. Проще всего это можно объяснить на примере ссылок. Начиная с самой первой версии, браузеры различали ссылки на посещенные и не посещенные пользователем ресурсы. И в зависимости от их состояния отображали их разным цветом. Например, браузер Internet Explorer по умолчанию отображает ссылки на не посещенные ресурсы синим цветом, а на посещенные – фиолетовым. При этом ссылка на ранее не посещенный ресурс может со временем изменить свое состояние и стать ссылкой на посещенный ресурс. Такое динамическое изменение состояния объекта и описывается с помощью селекторов, называемые псевдоклассами.

Рассмотрим вначале псевдоклассы для манипулирования отображением ссылок в окне браузера (табл. 4.2):

Таблица 4.2. Псевдоклассы для ссылок

Теперь зададим стили для отображения ссылки, используя псевдоклассы табл. 4.2:

a { text-decoration: none}
a:link {
color: green;
}
a:visited {
color: red;
}
a:active {
color: black;
}
a:hover {
color: black;
text-decoration: underline;
}

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

а)                                            б)

в)                                   г)

Рис. 4.6. Изменение стиля отображения ссылки с использованием псевдоклассов: а – вид непосещенной ссылки; б – вид ссылки при наведении курсора; в – вид посещенной ссылки; г – вид посещенной ссылки при наведении на нее курсора

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

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

a.external:link {font-weight: bold;}
a.external:visited {font-weight: bold;}
a.external:active {font-weight: bold;}
a.external:hover {font-weight: bold; text-decoration: underline;}

а в HTML-странице написать

<p><a href="#">Внутренняя ссылка</a>
<p><a href="http://yandex.ru" class="external">Внешняя ссылка</a>

в результате получим (рис. 4.7):

Рис. 4.7. Использование селекторов совместно с псевдоклассами

В CSS2.1 были введены три псевдокласса, позволяющие задавать стиль элемента на события от пользователя. Они также называются динамическими псевдоклассами (табл. 4.3).

Таблица 4.3. Динамические псевдоклассы

В приведенных выше примерах уже использовались два динамических псевдокласса: active и hover. Продемонстрируем работу третьего псевдокласса focus на примере элемента ввода текста с клавиатуры:

input:focus {background: silver; font-weight: bold;}

и определим тег input в HTML-странице:

<input type="text" value="Поле ввода" />

в результате в окне браузера будет отображено (рис. 4.8):

а)                                            б)

Рис. 4.8. Стиль поля ввода: а – без фокуса; б – с фокусом

При использовании псевдоклассов focus и hover следует иметь в виду, что они поддерживаются современными браузерами и могут игнорироваться более старыми. Например, Internet Explorer 6.0 не воспринимает псевдокласс focus, а псевдокласс hover применяет только для ссылок. В IE7 hover стал применяться ко всем элементам, но нет поддержки focus.

Каскадные таблицы стилей предоставляют еще один полезный псевдокласс для работы с элементами first-child, который служит для указания первого дочернего элемента. Ниже представлен пример задание стилей с использованием псевдокласса first-child:

p:first-child {text-transform: uppercase;}

HTML-страница:

<h1>Заголовок страницы</h1>
<div>
<p>Первый абзац страницы</p>
<p>Второй абзац страницы</p>
</div>

результат (рис. 4.9):

Рис. 4.9. Пример работы псевдокласса first-child

В приведенном примере параграфы заключены в тег <div> для того, чтобы на странице существовали дочерние элементы. Если теги <p> не помещать внутрь тега <div>, то на странице не будет дочерних элементов и соответствующий псевдокласс не будет применен ни к одному тегу.