[атрибут$="значение"]

Устанавливает стиль для элемента в том случае, если значение атрибута оканчивается указанным текстом.

Синтаксис

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

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

Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   a[href$=".ru"] { /* Если ссылка заканчивается на .ru */
    background: url(images/ru.png) no-repeat 0 6px; /* Добавляем фоновый рисунок */ 
    padding-left: 12px; /* Смещаем текст вправо */ 
   } 
   a[href$=".com"] { /* Если ссылка заканчивается на .com */
    background: url(images/com.png) no-repeat 0 6px; 
    padding-left: 12px;
   }
  </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. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 1). Стилевые свойства будут добавляться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться уже не будет.

Добавление картинки к ссылкам

Рис. 1. Добавление картинки к ссылкам

Браузеры

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
7.0+1.0+3.5+1.0+1.0+1.0+1.0+

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3