CSS3/Selectors/attribute selector/attribute~=value
[attributename~="val"]
This selector represents an element with the "attributename" attribute whose value is a whitespace-separated list of words, one of which is exactly "val".
Syntax
elementname[attributename~="val"]{ properties }
Point, Note
- If "val" contains whitespace, it will never represent anything (since the words are separated by spaces).
- If "val" is the empty string, it will never represent anything.
Example
In the following example, the selector represents a span element whose class attribute has exactly the value "example":
[style.css]
h2[title~="CSS"]{ color: red; font-size: 1.2em; }
[index.html]
<body> <h2 title="CSS Selectors">CSS Selectors Level 3</h2> <h2 title="CSSColors">CSS Color Module Level 3</h2> </body>
The CSS Selectors Level 3 specification defines the attribute selector in 6.3.1. Attribute presence and value selectors.