CSS/Selectors/attribute selector/attribute~=value

From W3C Wiki
< CSS‎ | Selectors

[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>

CSS defines the attribute selector in 6.3.1. Attribute presence and value selectors.