htmlbook.ru - Для тех, кто делает сайты
Шаг за шагом Графика для Web
Шаг за шагом > CSS по шагам > Селекторы атрибутов

Этот материал устарел, рекомендую Самоучитель CSS

Шаг 12. Селекторы атрибутов

Влад Мержевич

Для изменения стиля элементов содержащих различные параметры, в 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">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   Q {
    font-style: italic; /* Курсивное начертание */
    quotes: "\00AB" "\00BB"; /* Меняем вид кавычек в цитате */
   }
   Q[title] {
    color: maroon; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <p>Продолжая известный закон Мерфи, который гласит: <q>Если неприятность 
  может случиться, то она обязательно случится</q>, можем ввести свое наблюдение: 
  <q title="Из законов Фергюсона-Мержевича">После 
  того, как веб-страница будет корректно отображаться в одном браузере, выяснится, 
  что она неправильно показывается в другом</q>.</p>
 </body>
</html>

Результат примера показан на рис. 12.1.

Рис. 12.1

Рис. 12.1. Изменение стиля элемента в зависимости от применения параметра title

В данном примере меняется цвет текста внутри контейнера <Q>, когда к нему добавляется параметр title. Обратите внимание, что для селектора Q[title] нет нужды повторять атрибуты, поскольку они наследуются от селектора Q.

Селектор атрибута со значением

Устанавливает стиль для элемента в том случае, если задано определенное значение специфичного параметра. Синтаксис применения следующий.

[атрибут="значение"] { Описание правил стиля } Селектор[атрибут="значение"] { Описание правил стиля }

В первом случае стиль применяется ко всем элементам, которые содержат указанное значение атрибута. А во втором — только к определенным селекторам.

В примере 12.2 показано изменение стиля ссылки в том случае, если тег <A> содержит параметр target="_blank". При этом ссылка будет открываться в новом окне и чтобы показать это, с помощью стилей добавляем небольшой рисунок перед текстом ссылки.

Пример 12.2. Стиль для открытия ссылок в новом окне

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[target="_blank"] { 
    background: url(blank.gif) no-repeat 0 2px; /* Параметры фонового рисунка */
    padding-left: 15px; /* Смещаем текст вправо */
   }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Обычная ссылка</a> | 
     <a href="link2" target="_blank">Ссылка в новом окне</a></p>
 </body>
</html>

Результат примера показан ниже (рис. 12.2).

Рис. 12.2

Рис. 12.2. Изменение стиля элемента в зависимости от значения параметра target

В данном примере рисунок к ссылке добавляется с помощью атрибута background. В его функции входит создание повторяющейся фоновой картинки, но повторение фона можно отменить через аргумент no-repeat, что в итоге даст единственное изображение.

Атрибут начинается с определенного значения

Устанавливает стиль для элемента в том случае, если атрибут начинается с указанного значения. Синтаксис применения следующий.

[атрибут^="значение"] { Описание правил стиля } Селектор[атрибут^="значение"] { Описание правил стиля }

В первом случае стиль применяется ко всем элементам, которые начинаются с заданного значения атрибута. А во втором — только к определенным селекторам.

Предположим, что на сайте требуется разделить стиль обычных и внешних ссылок — ссылки, которые ведут на другие сайты. Чтобы не добавлять к тегу <A> новый класс, воспользуемся селекторами атрибутов. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http://, его и добавляем к селектору A, как показано в примере 12.3.

Пример 12.3. Изменение стиля внешней ссылки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[href^="http://"] { 
    font-weight: bold; /* Жирное начертание */
   }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Обычная ссылка</a> | 
  <a href="http://htmlbook.ru" target="_blank">Внешняя ссылка на сайт htmlbook.ru</a></p>
 </body>
</html>

Результат примера показан ниже (рис. 12.3).

Рис. 12.3

Рис. 12.3. Изменение стиля для внешних ссылок

В данном примере внешние ссылки выделяются жирным начертанием. Также можно воспользоваться показанным в примере 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>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <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>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <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://webimg.ru">Графика для Веб</a></p>
 </body>
</html>

Результат данного примера показан на рис. 12.4.

Рис. 12.4

Рис. 12.4. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»

Существуют и некоторые другие виды селекторов аргументов, но они применяются достаточно редко, поэтому их описание мы опустим.

Статья опубликована: 26.10.2005 Последнее обновление: 23.12.2008
CSS по шагам
Примеры из статьи

Copyright Влад Мержевич, по всем вопросам пишите по адресу: vlad@htmlbook.ru