| 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 [атрибут $="значення"] {Опис правил стилю}
В першому випадку стиль застосовується до всіх елементів у яких значення атрибута завершується заданим текстом. А в другому — тільки до певних селекторам.
Приклад
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Селектори атрибутів </title>
<style>
a[href$=".ru"] { /* Якщо посилання закінчується на .com */ background: url(images/usa.png) no-repeat 0 6px; /* Додаємо фоновий малюнок */ padding-left: 12px; /* Зміщуємо текст вправо */ }
a[href $=".com.ua"] { /* Якщо посилання закінчується на .com.ua */ background: url(images/ua.png) no-repeat 0 6px; padding-left: 12px; }
</style>
</head>
<body>
<p>
<a href="http://google.com">
Google.com </a>
| <a href="http://google.com.ua">
Google.com.ua </a>
</p>
</body>
</html>
В даному прикладі містяться два прямих посилання на різні домени — com і com.ua. При цьому до кожного такого посилання за допомогою стилів додається своє фонове зображення (рис. 1). Стильові властивості будуть додаватися тільки для тих посилань, атрибут href яких закінчується на «.com.ua» або «.com». Зауважте, що додавши до імені домена слеш (http://google.com/) або адресу сторінки (http://google.com/search/), ми змінимо тим самим закінчення і стиль застосовуватися вже не буде.
