Пример 1
Как стилизовать элементы с атрибутом title, который содержит слово "flower":<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
[title~=flower] { border: 5px solid yellow; }
</style>
</head>
<body>
<p>Изображение с атрибутом title, включающим слово "flower" получает желтую границу.</p>
<img src="/images/klematis.jpg" title="plant flower klematis" width="150" height="113">
<img src="/images/img_flwr.gif" title="flowers" width="224" height="162">
<img src="/images/landscape.jpg" title="landscape" width="160" height="120">
<p><b>Примечание:</b> Для того, чтобы [<i>attribute</i>~=<i>value</i>] работал в IE, необходимо указать DOCTYPE.</p>
</body>
</html>
Определение и использование
Селектор [attribute~=value] стилизует элементы с указаным атрибутом включающим определенное значение.
Примечание: Значение должно быть целым словом, либо самостоятельным (title="flower"), либо разделенным пробелами (title="plant flower klematis").
Поддержка браузеров
Селектор [attribute~=value] поддерживается во всех ведущих браузерах.
Примечание: Для того, чтобы [attribute~=value] работал в IE, необходимо указать <!DOCTYPE>.
Версия CSS
Селектор [attribute~=value] впервые представлен в: CSS 2
Связанные страницы
Пособие по CSS: CSS Селекторы атрибутов
Была ли эта информация полезной?
