CSS3: Attribute selectors

The W3C Working Draft 15 December 2005 - Selectors Module says:

6.3.2. Substring matching attribute selectors

Three additional attribute selectors are provided for matching substrings in the value of an attribute:

[att^=val]
Represents an element with the att attribute whose value begins with the prefix “val”.
[att$=val]
Represents an element with the att attribute whose value ends with the suffix “val”.
[att*=val]
Represents an element with the att attribute whose value contains at least one instance of the substring “val”.

Attribute values must be identifiers or strings. The case-sensitivity of attribute names in selectors depends on the document language.

Lets play with these 3 selectors and you will see for yourself if your browser supports them.

  1. E[att^="string"] {property: value;} where E is a selector.

    CSS:

    p[title^="ho"] {background: green;}

    HTML:

    <p title="home">
  This paragraph should have a green background.
</p>
<p title="contact">
  The attribute selector doesn't match this paragraph.
</p>
<p title="house">
  This paragraph should have a green background.
</p>
<p>
  The attribute selector doesn't match this paragraph.
</p>
<p title="hot">
  This paragraph should have a green background.
</p>

    Test suite:

    This paragraph should have a green background.

    The attribute selector doesn’t match this paragraph.

    This paragraph should have a green background.

    The attribute selector doesn’t match this paragraph.

    This paragraph should have a green background.

  2. E[att$="string"] {property: value;} where E is a selector.

    CSS:

    p[title$="t"] {background: green;}

    HTML:

    <p title="home">
  The attribute selector doesn't match this paragraph.
</p>
<p title="contact">
  This paragraph should have a green background.
</p>
<p title="house">
  The attribute selector doesn't match this paragraph.
</p>
<p>
  The attribute selector doesn't match this paragraph.
</p>
<p title="hot">
  This paragraph should have a green background.
</p>

    Test suite:

    The attribute selector doesn’t match this paragraph.

    This paragraph should have a green background.

    The attribute selector doesn’t match this paragraph.

    The attribute selector doesn’t match this paragraph.

    This paragraph should have a green background.

  3. E[att*="string"] {property: value;} where E is a selector.

    CSS:

    p[title*="ont"] {background: green;}

    HTML:

    <p title="home">
  The attribute selector doesn't match this paragraph.
</p>
<p title="contact">
  This paragraph should have a green background.
</p>
<p title="house">
  The attribute selector doesn't match this paragraph.
</p>
<p>
  The attribute selector doesn't match this paragraph.
</p>
<p title="hot">
  The attribute selector doesn't match this paragraph.
</p>

    Test suite:

    The attribute selector doesn’t match this paragraph.

    This paragraph should have a green background.

    The attribute selector doesn’t match this paragraph.

    The attribute selector doesn’t match this paragraph.

    The attribute selector doesn’t match this paragraph.

Written by Mauricio Samy Silva.