CSS/Selectors/attribute selector/attribute~=value

From Web Education Community Group
< CSS‎ | Selectors
Jump to: navigation, search


This selector represents an element with the "attributename" attribute whose value is a whitespace-separated list of words, one of which is exactly "val".


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.


In the following example, the selector represents a span element whose class attribute has exactly the value "example":


   color: red;
   font-size: 1.2em;


  <h2 title="CSS Selectors">CSS Selectors Level 3</h2>
  <h2 title="CSSColors">CSS Color Module Level 3</h2>

Css3 selectors att 003.png

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