Berulang kali menelusuri CSS baik di template wordpress maupun template css gratisan belum pernah menemukan penggunaan atribut selector, padahal draft rilisnya sudah sejak tahun 2005.

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.

Jika diartikan kurang lebih adalah seperti ini:

6.3.2. Substring pencocokan atribut selektor
Tiga atribut selektor tambahan disediakan untuk pencocokan substring dalam nilai atribut:
[Att ^ = val]
Merupakan suatu elemen dengan atribut att yang nilainya diawali dengan awalan “val”.
[Att $ =] val
Merupakan suatu elemen dengan atribut att yang nilainya berakhir dengan akhiran “val”.
[Att val *=]
Merupakan suatu elemen dengan atribut att yang nilainya berisi setidaknya satu contoh dari substring “val”.
Nilai atribut harus pengidentifikasi atau string. Kasus-sensitivitas nama atribut dalam penyeleksi tergantung pada bahasa dokumen.

Marilah kita coba satu persatu:

1. E[att^="string"] {property: value;} E adalah sebuah selektor.

   CSS

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

   HTML

   <p title="home">Paragraf ini berbackground kuning</p>
   <p>Paragraf ini normal-normal saja</p>
   <p title="honocoroko">Paragraf ini berbackground kuning</p>
   <p>Paragraf ini normal-normal saja</p>

   Dan hasilnya akan seperti ini:

   Paragraf ini berbackground kuning

   Paragraf ini normal-normal saja

   Paragraf ini berbackground kuning

   Paragraf ini normal-normal saja

2. E[att$="string"] {property: value;} E adalah sebuah selektor.

   CSS

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

   HTML

   <p title="contact">Paragraf ini berbackground kuning</p>
   <p>Paragraf ini normal-normal saja</p>
   <p title="target">Paragraf ini berbackground kuning</p>
   <p>Paragraf ini normal-normal saja</p>

   Dan hasilnya akan seperti ini:

   Paragraf ini berbackground kuning

   Paragraf ini normal-normal saja

   Paragraf ini berbackground kuning

   Paragraf ini normal-normal saja

3. E[att*="string"] {property: value;} E adalah sebuah selektor.

   CSS

   p[title*="dul"] {background: #FFCC00;}

   HTML

   <p title="judul">Paragraf ini berbackground kuning</p>
   <p>Paragraf ini normal-normal saja</p>
   <p title="sundul">Paragraf ini berbackground kuning</p>
   <p>Paragraf ini normal-normal saja</p>

   Dan hasilnya akan seperti ini:

   Paragraf ini berbackground kuning

   Paragraf ini normal-normal saja

   Paragraf ini berbackground kuning

   Paragraf ini normal-normal saja

OK. Selamat mencoba….