<< Предыдущая Оглавление Следующая >>


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

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

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

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

Обозначение

Описание

:link

псевдокласс не посещенной ссылки, имеющий атрибут href

:visited

псевдокласс посещенной ссылки

:active

псевдокласс активной ссылки (та которая выбрана, но еще не посещена)

:hover

псевдокласс ссылки, над которой расположен курсор мыши

Теперь зададим стили для отображения ссылки, используя псевдоклассы табл. 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. Динамические псевдоклассы

Обозначение

Описание

:focus

псевдокласс элемента с активным фокусом (т.е. элемент, выбранный пользователем в настоящий момент)

:active

псевдокласс элемента, активизированный пользователем

:hover

псевдокласс элемента, над которым расположен курсор мыши

В приведенных выше примерах уже использовались два динамических псевдокласса: 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>, то на странице не будет дочерних элементов и соответствующий псевдокласс не будет применен ни к одному тегу.

Видео по теме

HTML с нуля: урок 1 - как работает Интернет и что такое сайт

HTML с нуля: урок 2 - инструментарий, структура документа, стандарты

HTML с нуля: урок 3 - основные теги форматирования HTML

HTML с нуля: урок 4 - ссылки, теги div и span

HTML с нуля: урок 5 (часть 1) - таблицы

HTML с нуля: урок 5 (часть 2) - фреймы

HTML с нуля: урок 6 - HTML формы, GET и POST запросы

HTML с нуля: урок 7 - поля ввода, кнопки, списки

HTML с нуля: урок 8 - каскадные таблицы стилей, начало

HTML с нуля: урок 9 - CSS, теория

HTML с нуля: урок 10 - пример создания макета HTML страницы

 



<< Предыдущая Оглавление Следующая >>