Для изменения стиля элементов содержащих различные параметры, в CSS введены селекторы атрибутов. Они позволяют установить стиль тега по присутствию определенного параметра или его значения.
Замечание
Селекторы атрибутов поддерживаются браузером Internet Explorer начиная с версии 7.0, причем для корректной работы примеров необходимо добавить правильный !DOCTYPE.
Рассмотрим несколько типичных вариантов применения таких селекторов.
Простой селектор атрибута
Устанавливает стиль для элемента, если задан специфичный атрибут. Его значение в данном случае не важно. Синтаксис применения такого селектора следующий.
[атрибут] { Описание правил стиля }
Селектор[атрибут] { Описание правил стиля }
Пробел между именем селектора и квадратными скобками не допускается.
В примере 12.1 показано изменение стиля тега <Q>, в том случае, если к нему добавлен параметр title.
Пример 12.1. Вид элемента в зависимости от его параметра
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
Q {
font-style: italic; /* Курсивное начертание */
quotes: "\00AB" "\00BB" /* Меняем вид кавычек в цитате */
}
Q[title] {
color: maroon /* Цвет текста */
}
</style>
</head>
<body>
<p>Продолжая известный закон Мерфи, который гласит: <q>Если неприятность может случиться, то она обязательно случится</q>, можем ввести свое наблюдение: <qtitle="Из законов Фергюсона-Мержевича">После того, как веб-страница будет корректно отображаться в одном браузере, выяснится, что она неправильно показывается в другом</q>.</p>
</body>
</html>
Результат примера показан ниже.
Продолжая известный закон Мерфи, который гласит: Если неприятность может случиться, то она обязательно случится
, можем ввести свое наблюдение: После того, как веб-страница будет корректно отображаться в одном браузере, выяснится, что она неправильно показывается в другом
.
В данном примере меняется цвет текста внутри контейнера <Q>, когда к нему добавляется параметр title. Обратите внимание, что для селектора Q[title] нет нужды повторять атрибуты, поскольку они наследуются от селектора Q.
Селектор атрибута со значением
Устанавливает стиль для элемента в том случае, если задано определенное значение специфичного параметра. Синтаксис применения следующий.
[атрибут="значение"] { Описание правил стиля }
Селектор[атрибут="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам, которые содержат указанное значение атрибута. А во втором — только к определенным селекторам.
В примере 12.2 показано изменение стиля ссылки в том случае, если тег <A> содержит параметр target="_blank". При этом ссылка будет открываться в новом окне и чтобы показать это, с помощью стилей добавляем небольшой рисунок перед текстом ссылки.
Пример 12.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[target="_blank"] {
background:
url('blank.gif') /* Добавляем фоновый рисунок */
no-repeat /* Отменяем повторение фона */
0px /* По горизонтали рисунок не сдвигается */
2px; /* А по вертикали сдвигается вниз */
padding-left: 15px /* Смещаем текст вправо */
}
</style>
</head>
<body>
<p><a href="link1.html">Обычная ссылка</a> | <a href="link2"target="_blank">Ссылка в новом окне</a></p>
</body>
</html>
Результат примера показан ниже.
Обычная ссылка | Ссылка в новом окне
В данном примере рисунок к ссылке добавляется с помощью атрибута background. В его функции входит создание повторяющейся фоновой картинки, но повторение фона можно отменить через аргумент no-repeat, что в итоге даст единственное изображение.
Атрибут начинается с определенного значения
Устанавливает стиль для элемента в том случае, если атрибут начинается с указанного значения. Синтаксис применения следующий.
[атрибут^="значение"] { Описание правил стиля }
Селектор[атрибут^="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам, которые начинаются с заданного значения атрибута. А во втором — только к определенным селекторам.
Предположим, что на сайте требуется разделить стиль обычных и внешних ссылок — ссылки, которые ведут на другие сайты. Чтобы не добавлять к тегу <A> новый класс, воспользуемся селекторами атрибутов. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http://, его и добавляем к селектору A, как показано в примере 12.3.
Пример 12.3. Изменение стиля внешней ссылки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
A[href^="http://"] {
font-weight: bold /* Жирное начертание */
}
</style>
</head>
<body>
<p><a href="link1.html">Обычная ссылка</a> |
<a href="http://melviszar.ucoz.ru" target="_blank">Внешняя ссылка на сайт melviszar.ucoz.ru</a></p>
</body>
</html>
Результат примера показан ниже.
Обычная ссылка | Внешняя ссылка на сайт melviszar.ucoz.ru
В данном примере внешние ссылки выделяются жирным начертанием. Также можно воспользоваться показанным в примере 12.2 приемом и добавлять к ссылке небольшое изображение, которое будет сообщать, что ссылка ведет на другой сайт.
Атрибут оканчивается определенным значением
Устанавливает стиль для элемента в том случае, если атрибут оканчивается указанным значением. Синтаксис применения следующий.
[атрибут$="значение"] { Описание правил стиля }
Селектор[атрибут$="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам, которые завершаются заданным значением атрибута. А во втором — только к определенным селекторам.
Таким способом можно автоматически разделять стиль для сайтов домена ru и для сайтов других доменов вроде com, как показано в примере 12.4.
Пример 12.4. Стиль для разных доменов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
A[href$=".ru"] { /* Если ссылка заканчивается на .ru */
background:
url('ru.gif') /* Добавляем фоновый рисунок */
no-repeat; /* Отменяем повторение фона */
padding-left: 10px /* Смещаем текст вправо */
}
A[href$=".com"] { /* Если ссылка заканчивается на .com */
background:
url('com.gif')
no-repeat;
padding-left: 10px
}
</style>
</head>
<body>
<p><a href="http://www.yandex.com">Yandex.Com</a> |
<a href="http://www.yandex.ru">Yandex.Ru</a></p>
</body>
</html>
В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется свой фоновый рисунок. Стилевые атрибуты будут добавляться только для тех ссылок, параметр href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться не будет. В этом случае лучше воспользоваться селектором, в котором определенное значение может находиться в любом месте атрибута.
Значение встречается в любом месте атрибута
Возможны варианты, когда стиль следует применить к селектору с определенным атрибутом, частью которого является некоторое значение. При этом точно не известно, начинается или заканчивается этим значением аргумент. Тогда следует использовать следующий синтаксис.
[атрибут*="значение"] { Описание правил стиля }
Селектор[атрибут*="значение"] { Описание правил стиля }
Значение может располагаться в любом месте аргумента, например, в начале, в конце или где-то посередине. Главное, что оно является его частью. Так, в примере 12.5 показано изменение стиля ссылок, в которых встречается слово «htmlbook».
Пример 12.5. Стиль для разных сайтов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
[href*="htmlbook"] {
background: yellow /* Желтый цвет фона */
}
</style>
</head>
<body>
<p><a href="http://www.htmlbook.ru/html/">Теги HTML</a> |
<a href="http://stepbystep.htmlbook.ru">Шаг за шагом</a> |
<a href="http://web-graphics.ru">Графика для Веб</a></p>
</body>
</html>
Существуют и некоторые другие виды селекторов аргументов, но они применяются достаточно редко, поэтому их описание мы опустим.
