Selector atribut

Atribut HTML membawa informasi yang tidak selalu tampak sebagai kelas atau pengenal, misalnya type pada input, hreflang pada tautan, dan atribut data-* buatan sendiri. Selector atribut (attribute selector) mencocokkan elemen berdasarkan keberadaan dan isi atribut tersebut, sehingga gaya dapat menempel pada makna semantik tanpa menambah markah (markup) baru. Topik ini membahas tujuh bentuk pencocokan, kasus nyata pada formulir dan tautan, penanda sensitivitas huruf, serta bobot specificity yang menyertainya.

Tujuh bentuk pencocokan pada atribut#

Semua bentuk pencocokan ditulis dalam tanda kurung siku setelah selector dasarnya, misalnya input[type="text"]. Bentuk paling sederhana hanya menguji keberadaan atribut, sedangkan bentuk lain menguji nilainya dengan pola yang berbeda. Tabel berikut merangkum semuanya dengan contoh nilai yang cocok.

Bentuk ~= bekerja pada atribut yang isinya daftar kata dipisah spasi, sehingga [class~="aktif"] setara dengan .aktif untuk atribut class. Bentuk |= dirancang untuk nilai bertingkat berbahasa seperti id dan id-ID. Contoh berikut memperlihatkan beberapa bentuk yang paling sering dipakai.

/* Tautan aman yang diawali https */
a[href^="https"] {
  color: #0b5394;
}

/* Tautan berkas PDF diberi penanda akhiran */
a[href$=".pdf"]::after {
  content: " (PDF)";
  font-size: 0.85em;
}

/* Tautan yang memuat kata jadwal di posisi mana pun */
a[href*="jadwal"] {
  font-weight: 600;
}

/* Kata utuh aktif pada daftar kelas */
[class~="aktif"] {
  border-color: #0b5394;
}

/* Nilai bahasa id beserta varian seperti id-ID */
[lang|="id"] {
  hyphens: auto;
}

Bentuk yang dipilih menentukan makna yang dicari, bukan sekadar kecocokan teks. Awalan dan akhiran tepat untuk membedakan jenis berkas atau skema, potongan tepat untuk pola yang posisinya tidak pasti, sedangkan kata utuh dan nilai bertingkat menjaga selector tetap selektif pada nilai yang mirip. Dengan memilih bentuk yang paling sempit, selector tidak menyasar nilai yang kebetulan mengandung potongan yang sama.

Kasus nyata pada formulir dan tautan#

Formulir adalah tempat selector atribut paling produktif. Setiap input sudah membawa atribut yang menyatakan jenis dan kelakuannya, sehingga penataan gaya tidak memerlukan kelas tambahan. Contoh berikut memakai type untuk membedakan input, required untuk menandai bidang wajib isi, dan href untuk membedakan jenis tautan.

<form>
  <label for="nama">Nama lengkap</label>
  <input id="nama" type="text" name="nama" required>

  <label for="opsi">Kirim salinan</label>
  <input id="opsi" type="checkbox" name="salinan">

  <a href="https://contoh.example/jadwal">Jadwal piket</a>
  <a href="arsip-2024.pdf">Arsip 2024</a>
</form>

input[type="text"] {
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 6px;
}

input[type="checkbox"] {
  accent-color: #0b5394;
}

input[required] {
  border-left: 3px solid #0b5394;
}

a[href^="https"] {
  color: #0b5394;
}

a[href$=".pdf"]::after {
  content: " (PDF)";
  font-size: 0.85em;
}

Aturan di atas menghasilkan formulir yang bidang teksnya berbingkai halus, bidang wajib isinya berpenanda kiri, kotak centangnya berwarna aksen, dan tautannya terbedakan menurut tujuan. Seluruh perbedaan itu berasal dari atribut yang memang harus ditulis, sehingga tidak ada kelas dekoratif yang menumpuk pada markah. Uji hasilnya dengan mengganti satu atribut pada markah, lalu amati gaya yang ikut berpindah tanpa perubahan stylesheet.

Setiap aturan pada contoh itu dapat dibaca sebagai pernyataan makna. Bidang dengan atribut required memang wajib diisi, sehingga penanda kiri menjadi isyarat visual yang konsisten di seluruh formulir. Tautan yang diawali https memang menuju sumber aman, sedangkan tautan berkas PDF memang perlu diberitahu sebelum diklik. Selector atribut mengubah pernyataan tersebut menjadi gaya tanpa perantara kelas.

Pola yang sama mudah diperluas. Bidang angka dapat ditata melalui input[type="number"], tautan arsip dapat dicari melalui a[href*="arsip"], dan penataan lain dapat ditambahkan tanpa menyentuh markah sama sekali.

Atribut data-* sebagai penanda kustom#

Atribut data-* adalah ruang nama resmi untuk penanda buatan sendiri, dan selector atribut adalah satu-satunya cara menjangkau nilainya tanpa JavaScript. Nilai yang ditulis di sana bebas, tetapi disiplin penamaannya tetap penting karena selector atribut mencocokkan teks persis. Gunakan nilai yang stabil seperti data-status="arsip", bukan nilai yang berubah-ubah seperti tanggal, agar gaya tidak perlu diperbaiki setiap kali data berganti.

<tr data-status="arsip">
  <td>Laporan piket Januari</td>
  <td>Diarsipkan</td>
</tr>
<tr data-status="aktif">
  <td>Laporan piket Februari</td>
  <td>Berjalan</td>
</tr>

tr[data-status="arsip"] {
  color: #8595a6;
}

tr[data-status="aktif"] {
  color: #1f2933;
  font-weight: 600;
}

Pola seperti ini sering muncul pada tabel status dan daftar berkas karena nilai statusnya memang ditulis pada markah, baik oleh perangkat lunak maupun oleh penulis halaman. Apabila statusnya berubah, satu perubahan atribut langsung memindahkan baris ke gaya yang tepat tanpa menyentuh kelas apa pun. Dengan begitu, gaya dan data tidak pernah saling tertinggal ketika fitur bertambah.

Perlu dicatat bahwa atribut data-* bukan pengganti kelas untuk semua keperluan. Kelas tetap lebih tepat untuk nama komponen yang ditata CSS secara sengaja, sedangkan data-* cocok untuk keadaan dan data yang nilainya dikelola perangkat lunak. Pembagian peran ini menjaga selector atribut tetap bermakna dan tidak berubah menjadi daftar nilai yang sulit dilacak.

Sensitivitas huruf dan bendera i#

Pencocokan nilai atribut mengikuti kaidah huruf besar dan huruf kecil pada bahasa dokumennya. Pada dokumen HTML, nama atribut tidak membedakan huruf, sedangkan nilai atribut pada umumnya membedakan huruf. Pengecualian hanya terjadi pada nilai yang didefinisikan spesifikasi HTML sebagai tidak membedakan huruf. Nilai bebas buatan sendiri, misalnya isi atribut data-status, diperlakukan sensitif huruf.

Bendera (flag) i di akhir selector memaksa pencocokan mengabaikan perbedaan huruf, sedangkan bendera s memaksa pencocokan sensitif huruf. Bendera ditulis setelah nilai yang berada dalam tanda kutip. Teknik ini berguna ketika penulisan nilai pada data yang dikelola tidak seragam.

/* Draft, draft, dan DRAFT semuanya terjangkau */
[data-status="draft" i] {
  color: #8595a6;
  font-style: italic;
}

Perlu diingat bahwa bendera hanya mengubah pencocokan huruf pada nilai, bukan makna pola yang dipilih. Selector [data-status="Draft" i] dan [data-status="draft" i] menjadi identik karena perbedaan huruf diabaikan, tetapi bentuk ^= tetap mencari awalan dan ~= tetap mencari kata utuh. Karena itu kebijakan penulisan nilai yang konsisten tetap diutamakan, sedangkan bendera berperan sebagai pengaman.

Bobot specificity selector atribut#

Selector atribut menambah bobot sekelas kelas pada perhitungan specificity, yaitu 0,1,0. Gabungannya dengan penyusun lain dihitung seperti biasa, sehingga input[type="text"] berbobot 0,1,1 dan [class~="aktif"] berbobot 0,1,0, sama seperti .aktif. Pengetahuan ini penting saat selector atribut dicampur dengan kelas pada stylesheet yang sama.

Karena selector atribut setara kelas, urutan penulisan menjadi penentu ketika dua aturan berbobot sama saling bertabrakan. Aturan yang ditulis belakangan menang, sebagaimana kaidah urutan sumber pada cascade. Pilih atribut yang maknanya stabil, misalnya type dan required, alih-alih nilai yang sering berubah seperti isi data-status.

Sifat setara kelas ini juga berlaku saat selector atribut digabungkan dengan pseudo-class. Aturan input[type="checkbox"]:checked berbobot 0,2,1 dan berhak mengalahkan aturan kelas tunggal yang menata kontrol yang sama. Perhitungan seperti ini sebaiknya dilakukan saat merancang grup aturan, bukan setelah gaya saling menimpa.

Kesalahan umum#

Kesalahan pertama adalah mengabaikan tanda kutip pada nilai yang mengandung karakter khusus. Selector seperti [data-info=dua kata] tidak valid karena pencocokan tanpa kutip hanya menerima satu kata, sehingga seluruh aturan dibuang browser dan gayanya hilang. Selalu beri tanda kutip ganda pada nilai, terutama bila isinya mengandung spasi, titik, atau tanda hubung.

Kesalahan kedua adalah mengira ^= menjangkau tautan relatif. Selector a[href^="https"] hanya menjangkau tautan yang atributnya benar-benar diawali teks tersebut, sehingga <a href="arsip.pdf"> tidak pernah cocok. Sesuaikan pola dengan bentuk nilai yang ditulis pada markah, bukan dengan bentuk URL setelah browser menyelesaikannya.

Kesalahan ketiga adalah menukar ~= dengan *=. Bentuk ~= mencocokkan kata utuh dalam daftar yang dipisah spasi, sehingga [class~="utama"] tidak menjangkau utama-luar, sedangkan *= menjangkau keduanya karena hanya mencari potongan teks. Pilih bentuk sesuai maknanya agar selector tidak menyasar nilai yang kebetulan mirip.

Kesalahan keempat adalah memperlakukan selector atribut sebagai pengganti kelas untuk semua komponen. Pencocokan teks pada atribut memang fleksibel, tetapi hubungan antargaya menjadi tidak terlihat apabila seluruh penataan bergantung pada nilai atribut yang tersebar. Simpan selector atribut untuk semantik yang memang berasal dari HTML dan data-*.

Ringkasan#

• Selector atribut ditulis dalam tanda kurung siku dengan tujuh bentuk pencocokan, mulai dari keberadaan atribut hingga awalan, akhiran, potongan, kata utuh, dan nilai bertingkat.
• Formulir dan tautan adalah kasus nyata yang paling produktif karena atributnya memang menyatakan jenis dan tujuan.
• Bendera i memaksa pencocokan tanpa membedakan huruf besar dan kecil, sedangkan bendera s memaksa sebaliknya.
• Setiap selector atribut menambah bobot sekelas kelas, sehingga input[type="text"] berbobot 0,1,1 dan diperlakukan seperti selector kelas pada persaingan gaya.

Referensi#

• Attribute selectors — MDN — Dokumentasi lengkap ketujuh bentuk pencocokan beserta bendera i dan s.
• Selectors — web.dev — Pelajaran selector pada Learn CSS, termasuk bagian selector atribut.