Attribute Selector

HTML menyimpan banyak informasi pada atribut: href pada tautan, type pada input, lang pada elemen berbahasa tertentu, dan data-* untuk data kustom. Attribute selector memungkinkan CSS membaca informasi tersebut lalu menunjuk elemen berdasarkan nilainya. Kemampuan ini berguna ketika kita tidak bisa menambahkan class ke markup — misalnya pada widget pihak ketiga — atau ketika nilai atribut itu sendiri sudah cukup sebagai penanda. Chapter ini membahas tujuh pola pencocokan beserta contoh pemakaiannya pada tautan dan form.

Tujuh Pola Pencocokan #

Semua pola ditulis di dalam kurung siku, bisa berdiri sendiri atau dirangkai setelah selector lain. Tabel berikut merangkum pola yang tersedia, dengan rincian lengkap pada Attribute selectors di MDN :

Pola |= lazim dipakai untuk kode bahasa: [lang|="id"] mencocokkan lang="id" sekaligus lang="id-ID". Sementara ~= bekerja pada atribut berisi beberapa kata, seperti atribut class.

Contoh: Menandai Tautan dan Input #

Contoh berikut memakai attribute selector untuk memberi petunjuk visual pada tautan, memilah jenis input, membaca state dari atribut data-*, dan mengenali kartu lewat atribut class:

a[href^="https://"] {
  color: rgb(22, 163, 74);
}

a[href$=".pdf"] {
  color: rgb(220, 38, 38);
}

a[href*="arsip"] {
  color: rgb(79, 70, 229);
}

input[type="text"] {
  border: 2px solid rgb(148, 163, 184);
  border-radius: 6px;
}

[data-status="aktif"] {
  color: rgb(2, 132, 199);
  font-weight: 700;
}

[class~="kartu"] {
  border: 1px solid rgb(203, 213, 225);
  border-radius: 8px;
}

<a href="https://docs.example.com/css">Dokumentasi (https)</a>
<a href="/files/panduan.pdf">Panduan (PDF)</a>
<a href="http://contoh.example/arsip/2024">Arsip 2024</a>

<input type="text" placeholder="Nama lengkap">
<span data-status="aktif">Server berjalan normal</span>

<div class="kartu unggulan">Kartu bergaris abu-abu.</div>

Hasil di Browser:

Tautan https tampil hijau (color: rgb(22, 163, 74)), tautan PDF tampil
merah (color: rgb(220, 38, 38)), dan tautan arsip tampil ungu
(color: rgb(79, 70, 229)).
Input teks bergaris abu-abu 2px dengan sudut membulat:
border-color rgb(148, 163, 184), border-radius 6px.
Status "Server berjalan normal" tampil biru dan tebal:
color rgb(2, 132, 199), font-weight 700.
Kartu bergaris abu-abu: border-color rgb(203, 213, 225),
border-radius 8px.

Mari kita telaah aturan di atas baris demi baris:

1. Baris 1 (a[href^="https://"]): tautan yang href-nya diawali https:// dianggap koneksi terenkripsi dan diberi warna hijau.
2. Baris 5 (a[href$=".pdf"]): akhiran .pdf menandai tautan berkas; warna merah membantu pengguna mengenalinya sebelum mengeklik.
3. Baris 9 (a[href*="arsip"]): pola mengandung menangkap kata arsip di posisi mana pun dalam href.
4. Baris 13 (input[type="text"]): pencocokan persis memilah input teks dari jenis lain seperti checkbox, sehingga garisnya tidak menular ke input lain.
5. Baris 18 ([data-status="aktif"]): atribut data-* sering dibaca CSS untuk menampilkan state yang dikelola aplikasi.
6. Baris 22 ([class~="kartu"]): pola kata-utuh mencocokkan kartu di antara kata-kata atribut class, sehingga class="kartu unggulan" lolos.

Catatan Pemakaian #

Pencocokan nilai atribut pada HTML pada umumnya peka huruf besar-kecil, dan sensitivitasnya bergantung pada atribut yang bersangkutan. Ketika dibutuhkan pencocokan yang tak peka huruf, tambahkan flag i setelah nilai, misalnya [type="text" i].

Bedakan pula pola ~= dan *=: [class~="kartu"] mencocokkan kata utuh sehingga class="kartu-unggulan" tidak lolos, sedangkan [class*="kartu"] mencocokkan potongan mana pun sehingga kartu-unggulan ikut lolos. Pilih pola yang paling menyatakan maksud kita.

Demo pada chapter ini membawa enam elemen uji dengan atribut data-expected yang memverifikasi warna ketiga tautan, garis input, warna status, dan garis kartu lewat headless browser.