Elemen HTML Style Dengan Atribut Khusus

Hal ini dimungkinkan untuk elemen HTML gaya yang memiliki atribut tertentu, bukan hanya kelas dan id.

Catatan: IE7 dan IE8 atribut penyeleksi dukungan hanya jika DOCTYPE ditetapkan!.Pemilihan Atribut  TIDAK didukung di IE6 dan lebih rendah.

Memilih Atribut

Contoh di bawah gaya semua elemen dengan atribut judul:

[title]
{
color:blue;
}

 

Atribut dan Nilai Pemilih

Contoh di bawah ini  adalah semua elemen yang berjudul = “W3Schools”:

[title=W3Schools]
{
border:5px solid green;
}

 

Nilai Atribut dan  Pemilih – Beberapa Nilai

Contoh di bawah gaya semua elemen dengan atribut judul yang berisi nilai tertentu. Ini bekerja bahkan jika atribut memiliki nilai-nilai dipisahkan dengan spasi

[title~=hello] { color:blue; }

 

Contoh di bawah ini adalah gaya semua elemen dengan atribut lang yang berisi nilai tertentu. Ini bekerja bahkan jika atribut memiliki tanda hubung (-) nilai yang dipisahkan:

[lang|=en] { color:blue; }

 

Bentuk styling

Para pemilih atribut sangat berguna untuk styling bentuk tanpa kelas atau ID:

input[type=”text”]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type=”button”]
{
width:120px;
margin-left:35px;
display:block;
}