CSS Reference Manual

CSS @rules (RULES)

Complete List of CSS Properties

CSS Functions (Functions)Comprehensive Manual of CSS Selectors

CSS [attribute~=value] Selector

Represents elements that have an attribute named attribute, and the attribute is a list of values separated by spaces, where [at least] one value matches "value".

Complete CSS Selector Reference Manual

Online Example

Select all elements with the title attribute containing the word "flower"

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
<style>
[title~=flower]
{
　　　　border:5px solid red;
}
</style>
</head>
<body>
<p>If the "flower" word is contained in the title attribute of the image, it will be set to a red border.</p>
<img src="klematis.jpg" title="klematis flower" width="150" height="113"　/>
<img src="img_flwr.gif" title="flowers" width="224" height="162"　/>
<img src="landscape.jpg" title="landscape" width="160" height="120"　/>
<p><b>Note:</b>If [<i>attribute</i>~=<i>value</i>] To be in IE8　and earlier versions, DOCTYPE is required to be declared.</p>
</body>
</html>

Test and see ‹/›

Definition and Usage

[attribute~=value] Selector is used to select elements whose attribute values contain a specified word.

Browser Compatibility

IEFirefoxOperaChromeSafari

All mainstream browsers support [attribute~=value] Selector.

Note:[attribute~=value] in IE8Running in the middle, must declare <!DOCTYPE>.

CSS Tutorial: CSS Attribute Selector