Attribute Selector CSS

CSS2 mengizinkan para author untuk mencocokkan rule dengan atribut yang didefinisikan di dalam dokumen sumber.

Attribute selector bisa digunakan untuk mencocokkan dalam empat cara:

1. [att]
   Cocok bagi elemen yang atributnya ditetapkan. Sebagai contoh:

   [NAME] { /*kode-kode css di sini*/ }

   Kode di atas berlaku kepada semua elemen yang mempunyai atribut NAME, selain itu bukanlah targetnya.

2. [att=val]
   Cocok bagi elemen yang atributnya dan nilainya ditetapkan. Sebagai contoh:

   [NAME="demo"] { /*kode-kode css di sini*/ }

   Kode di atas berlaku kepada semua elemen yang mempunyai atribut NAME dan nilai NAME-nya 'demo', selain itu bukanlah targetnya.

3. [att~=val]
   Cocok bagi elemen di mana nilai atributnya berisi daftar kata yang dipisahkan spasi, dan di dalam nilai atribut itu ada kata yang cocok dengan nilai yang ditetapkan. Sebagai contoh:

   [CLASS~="demo"] { /*kode-kode css di sini*/ }

   Kode di atas berlaku kepada semua elemen yang mempunyai atribut CLASS di mana nilainya juga terdapat kata 'demo'. Misalnya elemen yang memenuhi persyaratan itu seperti ini:

   <P CLASS="dema demi demo">Alinea</P>

4. [att|=val]
   Cocok bagi elemen di mana nilai atributnya berisi daftar kata yang dipisahkan tanda penghubung, dan diawalnya harus terdapat kata yang telah ditetapkan di val.

   Sebagai contoh, kode di bawah ini akan cocok untuk nilai-nilai atribut LANG yang nilainya dimulai dengan en, misalnya nilai atribut LANG itu adalah en, en-US, atau en-cockney:

   [LANG|="en"] { /*kode-kode css di sini*/ }