САЙТЫ ПОД КЛЮЧ

НАШИ ПРОЕКТЫ

МАГАЗИН СКРИПТОВ

Электронные платежи
Платежные системы
Курс обучения WebMoney
Автоматизация платежей
Сервис RoboKassa
WebMoney Mobile
Полезные ресурсы
Файлохранилища
Социальные сети
Поисковые системы
WEB-программирование
Теги HTML в примерах
Справочник по CSS
Основы PHP
Справочник JavaScript
Самоучитель Flash 5
25 правил .htaccess

Справочник по CSS

Развернуть всё | Свернуть всё

[атрибут~="значение"]

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

Справочник по CSS. Версия 7.0 от 5.11.12

htmlbook.ru