Selektor Atribut CSS

Selektor [atribut] digunakan untuk memilih elemen dengan atribut tertentu.

Contoh berikut memilih semua elemen <a> dengan atribut target:

a[target] {
  background-color: yellow;
}

Selektor [atribut="nilai"] CSS

Selektor [atribut="nilai"] digunakan untuk memilih elemen dengan atribut dan nilai tertentu.

Contoh berikut memilih semua <a> elemen dengan atribut target="_blank":

a[target="_blank"] {
  background-color: yellow;
}

Selektor [atribut~="nilai"] CSS

Selektor [atribut~="nilai"] digunakan untuk memilih elemen dengan nilai atribut yang mengandung kata tertentu.

Contoh berikut memilih semua elemen dengan atribut judul yang berisi daftar kata yang dipisahkan spasi, salah satunya adalah "bunga":

[title~="flower"] {
  border: 5px solid yellow;
}

Contoh di atas akan mencocokkan elemen dengan title="flower", title="summer flower", dan title="flower new", tetapi bukan title="my-flower" atau title="flowers".

Selektor [atribut|="nilai"] CSS

Selektor [atribut|="nilai"] digunakan untuk memilih elemen dengan atribut spesifik dimulai dengan nilai tertentu.

Contoh berikut memilih semua elemen dengan nilai atribut class yang dimulai dengan "top":

[class|="top"] {
  background: yellow;
}

Catatan: Nilai harus berupa keseluruhan kata, baik sendiri, seperti class="top", atau diikuti oleh tanda hubung ( - ), seperti class="top-text".

Selektor [atribut^="nilai"] CSS

Selektor [atribut^="nilai"] digunakan untuk memilih elemen yang nilai atribut dimulai dengan nilai tertentu.

Contoh berikut memilih semua elemen dengan nilai atribut kelas yang dimulai dengan "top":

[class^="top"] {
  background: yellow;
}

Catatan: Nilai tidak harus berupa keseluruhan kata.

Selektor [atribut$="nilai"] CSS

Selektor [atribut$="nilai"] digunakan untuk memilih elemen yang nilai atributnya berakhir dengan nilai yang ditentukan.

Contoh berikut memilih semua elemen dengan nilai atribut kelas yang diakhiri dengan "test":

[class$="test"] {
  background: yellow;
}

Catatan: Nilai tidak harus berupa keseluruhan kata.

Selektor [atribut*="nilai"] CSS

Selektor [atribut*="nilai"] digunakan untuk memilih elemen yang nilainya atributnya berisi nilai yang ditentukan.

Contoh berikut memilih semua elemen dengan nilai atribut kelas yang berisi "te":

[class*="te"] {
  background: yellow;
}

Catatan: Nilai tidak harus berupa keseluruhan kata

Style Formulir

Selektor atribut dapat berguna untuk men-style formulir 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;
}

Sumber referensi: w3schools