Pemilih Atribut CSS

Menata gaya elemen HTML yang memiliki atribut yang khusus

Kami dapat menata gaya elemen HTML yang memiliki atribut atau nilai atribut yang khusus.

Pemilih [attribute] CSS

Pemilih [attribute] digunakan untuk memilih elemen yang memiliki atribut yang ditentukan.

Di contoh di bawah ini, pemilih akan memilih semua elemen <a> yang memiliki atribut target;

Contoh

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

Coba sendiri

Pemilih [attribute="value"] CSS

Pemilih [attribute="value"] digunakan untuk memilih elemen yang memiliki atribut dan nilai yang ditentukan.

Di contoh di bawah ini, pemilih akan memilih semua elemen <a> yang memiliki atribut target="_blank":

Contoh

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

Coba sendiri

Pemilih [attribute~="value"] CSS

Pemilih [attribute~="value"] digunakan untuk memilih elemen yang memiliki nilai atribut yang mengandung kata yang ditentukan.

Di contoh di bawah ini, pemilih akan memilih semua elemen yang memiliki atribut title yang mengandung kata "flower":

Contoh

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

Coba sendiri

Contoh di atas akan cocok dengan elemen berikut: title="flower", title="summer flower" serta title="flower new", tetapi tidak cocok: title="my-flower" atau title="flowers".

Pemilih [attribute|="value"] CSS

[attribute|="value"] Pemilih digunakan untuk memilih elemen yang memiliki atribut dengan nilai yang mulai dengan nilai yang ditentukan.

Dalam contoh di bawah ini, menciptakan semua elemen yang classnya mulai dengan "top":

Keterangan:Nilai harus sepenuhnya atau kata tunggal, seperti class="top" atau diikuti dengan tanda hubung, seperti class="top-text".

Contoh

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

Coba sendiri

Pencarian CSS [attribute^="value"]

Pencarian [attribute^="value"] digunakan untuk memilih elemen yang atributnya mulai dengan nilai yang ditentukan.

Dalam contoh di bawah ini, menciptakan semua elemen yang classnya mulai dengan "top":

Pemberitahuan:Nilainya tidak harus kata yang lengkap!

Contoh

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

Coba sendiri

Pencarian CSS [attribute$="value"]

Pencarian [attribute$="value"] digunakan untuk memilih elemen yang atributnya berakhir dengan nilai yang ditentukan.

Dalam contoh di bawah ini, menciptakan semua elemen yang classnya berakhir dengan "test":

Pemberitahuan:Nilainya tidak harus kata yang lengkap!

Contoh

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

Coba sendiri

Pencarian CSS [attribute*="value"]

[attribute*="value"] Pencarian pilih elemen yang atributnya mengandung kata yang ditentukan.

Dalam contoh di bawah ini, menciptakan semua elemen yang classnya mengandung "te":

Pemberitahuan:Nilainya tidak harus kata yang lengkap!

Contoh

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

Coba sendiri

Tata gaya formulir

Untuk menata gaya formulir tanpa class atau id, pencarian properti akan sangat berharga:

Contoh

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

Coba sendiri

Pemberitahuan:Kunjungi situs kami Tutorial CSS Form，Belajar lebih lanjut tentang cara mengatur gaya formulir CSS.

Semua pencarian CSS properti

Pencarian Contoh Deskripsi contoh
[attribute] [target] Pilih semua elemen yang memiliki atribut target.
[attribute=value] [target=_blank] Pilih semua elemen yang memiliki atribut target="_blank".
[attribute~=value] [title~=flower] Pilih semua elemen yang memiliki atribut title yang mengandung kata "flower".
[attribute|=value] [lang|=en] Pilih semua elemen yang memiliki atribut lang yang mulai dengan "en".
[attribute^=value] a[href^="https"] Pilih setiap elemen <a> yang href atributnya mulai dengan "https".
[attribute$=value] a[href$=".pdf"] Pilih setiap elemen <a> yang href atributnya berakhir dengan ".pdf".
[attribute*=value] a[href*="codew3c"] Pilih setiap elemen <a> yang mengandung substr 'codew3c' dalam nilai hrefnya.

Bacaan Tambahan

Buku Luar Biasa:Pemahaman Pemilih Attribut CSS