| 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
<! DOCTYP E html>
<html>
<head>
<meta charset="utf-8">
<title>
Блок </title>
<style>
[Class ~="block"] h3 {color: green; } </style>
</head>
<body>
<div class="block tag">
<h3>
Тема </h3>
</div>
</body>
</html>
В даному прикладі зелений колір тексту застосовується до селектора h3, якщо ім'я класу у шару задано як block . Відзначимо, що аналогічний результат можна отримати, якщо використовувати конструкцію *= замість ~=.