CSS селектор [атрибут~=значение]
Поддержка браузерами
| 12.0+ | 7.0+ | 2.0+ | 4.0+ | 9.6+ | 3.1+ |
Описание
Атрибут, который содержит список значений, разделенных пробелами, допускает выбор на основании любого из этих значений. В качестве примера можно рассмотреть атрибут class, способный принимать в качестве значения сразу несколько слов (названий классов):
<p class="myclass alert">Пример селектора выбора по частичному значению атрибута.</p>
Допустим, требуется выбрать только те элементы, атрибут class которых содержит в значении слово alert. Это возможно сделать посредством селектора атрибутов:
p[class~="alert"] { font-size: 150%; }
В примере стоит обратить внимание на наличие значка тильды(~). Тильда в данном селекторе является ключом для осуществления выбора элемента на основании наличия в значении атрибута нужного слова, отделенного пробелом. Если тильда будет пропущена, то получится требование к точному значению, которое выберет только элементы, где значении атрибута class содержится только слово alert.
Пример:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
[alt~=flower] { border: 5px double red; }
</style>
</head>
<body>
<p>Картинка с атрибутом alt, содержащим слово "flower", будет иметь красную рамку.</p>
<p>
<img src="klematis.jpg" alt="klematis flower" width="150" height="113">
<img src="img_flwr.gif" alt="flowers" width="224" height="162">
<img src="landscape.jpg" alt="landscape" width="160" height="120">
</p>
</body>
</html>
Результат данного примера
Картинка с атрибутом alt, содержащим слово "flower", будет иметь красную рамку.
