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 . Відзначимо, що аналогічний результат можна отримати, якщо використовувати конструкцію *= замість ~=.