✔[атрибут$="значение"] - [attr$='value']
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Устанавливает стиль для элемента в том случае, если значение атрибута оканчивается указанным текстом.
Синтаксис
[атрибут$="значение"] { Описание правил стиля
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. Добавление картинки к ссылкам
![[атрибут="значение"] - [attr='value']](/uploads/posts/2016-03/1458725540_selector_attribute_2.png)
![[атрибут^="значение"] - [attr^='value']](/uploads/posts/2016-03/1458726515_selector_attribute_3.png)
![[атрибут~="значение"] - [attr~='value']](/templates/print-prime/dleimages/no_image.jpg)
![Селекторы атрибутов - [attr]](/uploads/posts/2016-03/1458725418_selector_attribute_1.png)