✔[атрибут~="значение"] - [attr~='value']

23 марта 2016 2 570 Справочник CSS 1

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> 
   [class~="block"] h3 { color: green;  
  </style> 
 </head>  
 <body> 
  <div class="block tag"> 
   <h3>Заголовок</h3> 
  </div> 
 </body> 
</html>

В данном примере зелёный цвет текста применяется к селектору h3, если имя класса у слоя задано как block. Отметим, что аналогичный результат можно получить, если использовать конструкцию *= вместо ~=.