Псевдоклассы определяют динамическое состояние элементов, которое изменяется со временем или с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на нее курсора мыши. При использовании псевдоклассов браузер не перегружает текущий документ, поэтому с их помощью можно получить разные динамические эффекты на странице.
Синтаксис применения псевдоклассов следующий.
Элемент:Псевдокласс { Описание правил стиля }
Вначале следует элемент, к которому добавляется псевдокласс, затем указывается двоеточие, после которого идет имя псевдокласса. Допускается применять псевдоклассы к именам идентификаторов или классов (A.menu:hover {color: green}) и контекстным селекторам (.menu A:hover {background: #fc0}).
Условно все псевдоклассы делятся на группы, которые перечислены далее.
Псевдоклассы, определяющие состояние элементов
К этой группе относятся псевдоклассы, которые определяют текущее состояние элемента и применяют стиль к нему только в этом случае.
active
Происходит при активации пользователем элемента. Например, при наведении курсора на ссылку и нажатии левой кнопки мыши.
link
Применяется к непосещенным ссылкам, т.е. ссылкам, на которые пользователь еще не нажимал. Браузер, причем, сохраняет историю посещений некоторое время, поэтому ссылка может быть помечена как посещенная хотя бы потому, что по ней был зафиксирован переход раньше.
Замечание
Запись A {...} и A:link {...} по своему результату равноценна, поскольку в браузере дает один и тот же эффект, поэтому псевдокласс link можно не указывать.
focus
Применяется к элементу при получении им фокуса. Например, для текстового поля формы получение фокуса означает, что курсор установлен в поле, и с помощью клавиатуры можно вводить в него текст (пример 16.1).
Пример 16.1. Применение псевдокласса focus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
INPUT:focus {
color: red /* Красный цвет текста */
}
</style>
</head>
<body>
<form action="">
<input type="text" value="Черный текст">
</form>
</body>
</html>
Результат примера показан ниже.
В данном примере в текстовом поле содержится предварительный текст, он определяется значением параметра value тега <INPUT>. При щелчке по элементу формы происходит получение полем фокуса, и цвет текста меняется на красный. Достаточно щелкнуть в любом месте страницы (кроме текстового поля, естественно), как произойдет потеря фокуса и текст вернется к первоначальному черному цвету.
Замечание 1
Результат будет виден только для тех элементов, которые могут получить фокус. В частности, это теги <A>, <INPUT>, <SELECT> и <TEXTAREA>.
Замечание 2
Псевдокласс focus не поддерживается браузером Internet Explorer.
hover
Псевдокласс hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.
visited
Данный псевдокласс применяется к посещенным ссылкам. Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно (пример 16.2).
Пример 16.2. Изменение цвета ссылок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
A:link {
color: #036 /* Цвет непосещенных ссылок */
}
A:visited {
color: #606 /* Цвет посещенных ссылок */
}
A:hover {
color: #f00 /* Цвет ссылок при наведении на них курсора мыши */
}
A:active {
color: #ff0 /* Цвет активных ссылок */
}
</style>
</head>
<body>
<a href="link1.html">Ссылка 1</a> | <a href="link2.html">Ссылка 2</a> | <a href="link3.html">Ссылка 3</a>
</body>
</html>
Результат примера показан ниже.
В данном примере показано использование псевдоклассов совместно со ссылками. При этом имеет значение порядок следования псевдоклассов. Вначале указывается visited, а затем идетhover, в противном случае посещенные ссылки не будут изменять свой цвет при наведении на них курсора.
Псевдоклассы link и visited могут применяться только к ссылкам, а псевдоклассы active и hoverтакже и к другим элементам документа. Это расширяет набор приемов и позволяет создавать эффект перекатывания, когда стиль элемента меняется при наведении на него курсора мыши.
Замечание
Браузер Internet Explorer 6 и младше позволяет использовать псевдоклассы active и hoverтолько для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере можно добавлять и к другим элементам.
В примере 16.3 показана таблица, строки которой меняют свой цвет при наведении на них курсора мыши. Это достигается за счет добавления псевдокласса hover к селектору TR.
Пример 16.3. Выделение строк таблицы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
TR:hover {
background: #fc0; /* Меняем цвет фона строки таблицы */
}
</style>
</head>
<body>
<table width="400" border="1" cellpadding="4" cellspacing="0">
<tr>
<th> </th>
<th>Пики</th>
<th>Трефы</th>
<th>Бубны</th>
<th>Червы</th>
</tr>
<tr>
<td>Чебурашка</td>
<td>5</td>
<td>2</td>
<td>4</td>
<td>2</td>
</tr>
<tr>
<td>Крокодил Гена</td>
<td>2</td>
<td>7</td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>Шапокляк</td>
<td>5</td>
<td>4</td>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>Крыса Лариса</td>
<td>1</td>
<td>0</td>
<td>5</td>
<td>7</td>
</tr>
</table>
</body>
</html>
Результат примера показан ниже.
| Пики | Трефы | Бубны | Червы | |
|---|---|---|---|---|
| Чебурашка | 5 | 2 | 4 | 2 |
| Крокодил Гена | 2 | 7 | 1 | 3 |
| Шапокляк | 5 | 4 | 3 | 1 |
| Крыса Лариса | 1 | 0 | 5 | 7 |
Псевдоклассы, имеющие отношение к дереву документа
К этой группе относятся псевдоклассы, которые определяют положение элемента в дереве документа и применяют к нему стиль в зависимости от его статуса. Таких псевдоклассов не так много, но некоторые браузеры расширяют этот список, например, Netscape поддерживает достаточно большое число псевдоклассов, которые можно отнести к данной группе.
first-child
Применяется к первому дочернему элементу селектора, который расположен в дереве элементов документа. Чтобы стало понятно, о чем речь, разберем небольшой код (пример 16.4).
Пример 16.4. Использование псевдокласса first-child
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
B:first-child {
color: red /* Красный цвет текста */
}
</style>
</head>
<body>
<p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b> adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
<p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b> exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo consequat</b>.</p>
</body>
</html>
Результат примера показан ниже.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
В данном примере псевдокласс first-child добавляется к селектору B и устанавливает для него красный цвет текста. Хотя контейнер <B> встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т.е. текст «Lorem ipsum». В остальных случаях содержимое контейнера <B> отображается черным цветом. Со следующим абзацем все начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.
Замечание
Браузер Internet Explorer поддерживает псевдокласс first-child начиная с версии 7.0.
Псевдокласс first-child удобнее всего использовать в тех случаях, когда требуется задать разный стиль для первого и остальных однотипных элементов. Например, по правилам типографики красную строку для первого абзаца текста не устанавливают, а для остальных абзацев добавляют отступ первой строки. С этой целью применяют параметр text-indent с нужным значением отступа. Но чтобы изменить стиль первого абзаца и убрать для него отступ потребуется воспользоваться псевдоклассом first-child (пример 16.5).
Пример 16.5. Отступы для абзаца
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
P {
text-indent: 1em /* Отступ первой строки */
}
P:first-child {
text-indent: 0px /* Для первого абзаца отступ убираем */
}
</style>
</head>
<body>
<p>Историю эту уже начали забывать, хотя находились горожане, которые время от времени рассказывали ее вновь прибывшим в город посетителям.</p>
<p>Легенда обрастала подробностями и уже совсем не напоминала произошедшее в действительности событие. И, тем не менее, ни один человек не решался заикнуться о ней с наступлением темноты.</p>
<p>Но однажды в город вновь вошел незнакомец. Он хромал на левую ногу.</p>
</body>
</html>
Результат примера показан ниже.
Историю эту уже начали забывать, хотя находились горожане, которые время от времени рассказывали ее вновь прибывшим в город посетителям.
Легенда обрастала подробностями и уже совсем не напоминала произошедшее в действительности событие. И, тем не менее, ни один человек не решался заикнуться о ней с наступлением темноты.
Но однажды в город вновь вошел незнакомец. Он хромал на левую ногу.
В данном примере первый абзац текста не содержит отступа первой строки, а для остальных он установлен.
