CSS/Selectors/attribute selector/attribute~=value

From W3C Wiki
< CSS‎ | Selectors
Revision as of 19:04, 26 September 2011 by Hiroki (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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

Css3 selectors att 003.png

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