Attribute Selector

Selain class dan id, elemen HTML membawa banyak atribut lain yang menyimpan makna: type pada input, target pada link, href yang menunjuk tujuan, hingga atribut data buatan kita sendiri. Attribute selector memungkinkan CSS membaca atribut-atribut itu lalu menyasar elemen berdasarkan isinya — tanpa perlu menambah class baru hanya untuk keperluan styling. Chapter ini membahas enam pola pencocokannya, contoh pemakaian yang paling sering dibutuhkan, serta pengaturan huruf besar-kecil pada pencocokan nilai.

Enam Pola Pencocokan #

Semua pola ditulis dalam kurung siku, tepat setelah jenis elemen atau berdiri sendiri:

Pola	Artinya	Contoh nilai yang cocok
`[disabled]`	memiliki atribut, nilai apa pun	atribut `disabled` tanpa nilai
`[type="text"]`	nilai atribut persis sama	`type="text"`
`[href^="https"]`	nilai diawali teks tersebut	`https://…`
`[href$=".pdf"]`	nilai diakhiri teks tersebut	`laporan.pdf`
`[href*="kopi"]`	nilai mengandung teks tersebut	`/katalog/kopi-gayo`
`[class~="tombol"]`	teks tersebut menjadi salah satu kata utuh dalam daftar nilai	`class="tombol utama"`

Perhatikan pola terakhir: [class~="tombol"] bekerja sama persis dengan .tombol, karena class memang daftar kata yang dipisah spasi. Untuk class, tulisan titik lebih singkat; pola ~ baru terasa berguna untuk atribut lain yang berisi daftar kata.

Satu catatan penulisan: tanda kutip pada nilai bersifat opsional untuk nilai sederhana — input[type=text] juga sah — tetapi selalu memakai kutip membuat aturan konsisten dan aman untuk nilai yang mengandung spasi atau karakter khusus.

Pola Praktis yang Sering Dipakai #

css
/* Link yang membuka tab baru diberi latar penanda */
a[target="_blank"] {
  background-color: #f4fbf7;
  padding: 2px 8px;
  border-radius: 6px;
}

/* Link keluar (diawali https) diberi warna khusus */
a[href^="https"] {
  color: #0f766e;
}

/* Tautan berkas PDF ditebalkan */
a[href$=".pdf"] {
  font-weight: 600;
}

/* Input teks dan email diberi border yang senada */
input[type="text"],
input[type="email"] {
  border: 2px solid #d9d2c0;
  border-radius: 6px;
  padding: 8px 10px;
}

Demo berikut tidak memakai satu class styling pun pada link dan input; pemilahan berlangsung murni lewat atribut:

Mari kita telaah demonya:

a[target="_blank"]: hanya link kedua yang punya atribut target, sehingga hanya ia yang mendapat latar penanda.
input[type="text"] dan input[type="email"]: kedua input mendapat border berbeda sesuai jenisnya; aturan satu sama lain tidak bercampur.
input[type="checkbox"]: memakai accent-color agar kotak centang mengikuti palet tanpa restyling berat.
Class .pilihan hanya dipakai untuk tata letak label; seleksi komponennya tetap mengandalkan atribut.

Empat pola di atas memanfaatkan atribut yang memang sudah ada di markup, sehingga HTML tidak berubah sedikit pun. Bandingkan dengan pendekatan menambah class khusus pada setiap link dan input: lebih banyak atribut untuk dirawat, dengan hasil visual yang sama.

Bobot dan Kombinasi dengan Selector Lain #

Attribute selector dihitung sama beratnya dengan class: (0,1,0), sering disebut 10. Karena itu ia menyatu mulus dengan selector lain di rantai yang sama — sebelum atau sesudah class, pada jenis elemen apa pun:

css
/* Tombol utama yang sedang nonaktif */
.tombol-utama[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

Demo berikut memasang keadaan disabled pada satu dari dua tombol utama:

Kombinasi semacam ini sering dipakai untuk keadaan form karena atribut HTML-nya sudah menggambarkan keadaan — kita tinggal membacanya dari CSS.

Huruf Besar-Kecil pada Nilai #

Pencocokan nilai atribut bersifat case-sensitive: [href$=".pdf"] tidak menangkap laporan.PDF. Bila perbedaan huruf besar-kecil memang boleh diabaikan, tambahkan flag i tepat sebelum kurung tutup:

css
/* Menangkap .pdf, .PDF, maupun .Pdf */
a[href$=".pdf" i] {
  font-weight: 600;
}

Flag i didukung seluruh browser modern. Nama atributnya sendiri tidak peka huruf besar-kecil — INPUT[TYPE="TEXT"] dan input[type="text"] mencocokkan hal yang sama; yang membedakan hanya nilai di sisi kanan.

Kapan flag i layak dipakai? Simpan untuk nilai yang ditulis manusia dan beragam kapitalisasinya, seperti nama berkas hasil unggahan pengguna. Untuk atribut bawaan HTML yang nilainya baku, cukup tulis nilai persis seperti di markup.

Kesalahan Umum #

Kesalahan	Akibat	Perbaikan
Memakai `[href*="produk"]` tanpa sadar polanya longgar	Link seperti `/riwayat-produk` ikut terpilih	Gunakan `^` atau `$` agar posisi cocoknya pasti
Mengabaikan huruf besar-kecil pada nilai (`[href$=".PDF"]` saat berkasnya `.pdf`)	Selector tidak cocok tanpa peringatan	Tambahkan flag `i` bila perbedaan boleh diabaikan
Menyusun selector atribut panjang untuk pola yang berulang	CSS rapuh ketika atribut berubah	Beri class untuk pola yang dipakai lintas halaman

Ringkasan #

Attribute selector membaca atribut HTML apa pun — kehadiran, nilai persis, awalan, akhiran, bagian tengah, hingga kata dalam daftar — dan flag i melonggarkan pencocokan huruf besar-kecil bila diperlukan. Ia paling nyaman untuk elemen yang atributnya sudah bermakna, seperti input dan link. Chapter berikutnya memasuki kombinator: menyasar elemen berdasarkan hubungannya dengan elemen lain, dimulai dari descendant selector.