CSS3

• Home / CSS3 Previews / CSS3: Attribute selectors

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.