Selector untuk memberikan style ke elemen dapat menggunakan banyak cara yang di antaranya adalah Universal Selector *, Type Selector header, ID selector #header, Class Selector: .header, dan selector lainnya. Tapi dari sekian banyaknya selector, saya lebih sering menggunakan dan melihat developer lain menggunakan class selector untuk memberikan style. Saya paham penggunaan class lebih fleksibel, tapi bukan berarti kamu perlu menggunakannya di semua tempat. Bisa jadi kamu hanya membutuhkan type selector, atau bisa jadi kamu hanya membutuhkan attribute selector. Penggunaan class di semua tempat akan membutakan matamu terhadap kemampuan-kemampuan unik dari selector lain.
Selain attribute, ternyata accessibility juga sering diabaikan oleh developer. Walaupun pengerjaannya seakan membuat developer jadi kerja 2 kali, tapi penerapan accessibility akan membuat website lebih sehat, lebih banyak merangkul user, dan akan menaikkan value kamu sebagai developer.
Pada tulisan ini saya akan membukakan matamu agar lebih perhatian terhadap attribute selector sekaligus penggunaannya bersamaan dengan accessibility.
🤔 Apa Itu Attribute Selector?
Attribute selector adalah jenis selector yang menargetkan elemen berdasarkan atribut HTML-nya. Aturan penulisannya adalah nama elemen diapit oleh kurung siku [attribute].
/* Menargetkan elemen yang memiliki atribut hidden */
[hidden] { .... }
/* Menargetkan elemen input yang memiliki atribut required */
input[required] { .... }
/* Menargetkan elemen yang memiliki atribut aria-hidden dengan value true */
[aria-hidden="true"] { .... }
🎯 Kapan Attribute Selector Lebih Baik?
- Atribut memiliki arti semantik/fungsional yang jelas
- Tidak memungkinkan atau tidak efisien menambahkan class
- Kamu ingin styling berdasarkan
data-attribute
✅ Atribut Semantik
💡 Contoh 1: Alert UI
<div role="alert" aria-live="assertive">
Berhasil mengupdate profile
</div>
[role="alert"] {
background-color: green;
}
Tanpa perlu class .alert, kita bisa styling berdasarkan arti semantiknya langsung.
💡 Contoh 2: Form Wajib Isi
<form action="#">
<div>
<label for="name">Name</label>
<input type="text" required>
</div>
</form>
label:has(+ [required])::after {
content: "*"
}
Selector ini membantu kita untuk memberikan indikator visual ke field yang wajib diisi.
💡 Contoh 3: Tab UI
<button role="tab" aria-selected="true">Tab 1</button>
[aria-selected="true"] {
color: blue;
}
Selector ini bisa menggantikan class .active dengan lebih semantik.
💡 Contoh 4: Navigation Aktif
<a href="/" aria-current="page">Beranda</a>
[aria-current="page"] {
color: blue;
}
Aksesibilitas dapet, styling pun tetap rapi.
🚫 Tidak memungkinkan atau tidak efisien menggunakan class
💡 Contoh 1: Elemen dari Framework
<button type="button" data-bs-button>Click</button>
[data-bs-button] {
background-color: indigo;
}
Kalau elemen dari third-party library gak bisa diutak-atik, ini solusinya.
💡 Contoh 2: Deteksi Gambar Tanpa alt
<img src="https://picsum.photos/600/400">
img:not([alt]), img[alt=""] {
filter: blur(4px);
}
Bisa buat debugging atau memperingatkan kalau ada gambar yang lupa dikasih deskripsi.
💡 Contoh 3: Label tanpa for
<label>Name</label>
<input id="name">
label:not([for]), label[for=""] {
opacity: .3;
}
Bantu mendeteksi potensi masalah UX di form.
⚙️ Styling Berdasarkan data-* Attribute
💡 Contoh 1: Dark Mode
<html lang="en" data-theme="dark">
[data-theme="dark"] {
background-color: black;
}
💡 Contoh 2: Variant Button
<button data-variant="primary">Submit</button>
button[data-variant="primary"] {
background-color: cyan;
}
✨ Penutup
Semoga tulisan ini bisa bikin kamu lebih terbuka untuk mempertimbangkan attribute selector dalam styling, terutama untuk kasus-kasus yang menyangkut semantik dan aksesibilitas.
Dengan pemakaian yang tepat, kita bisa menulis CSS yang:
- Lebih bersih
- Lebih semantik
- Lebih inklusif
Yuk, mulai sekarang, kasih panggung untuk attribute karena accessibility perlu disambut 🙌
Punya trik menarik dengan attribute selector? Share di kolom komentar ya!
Kalau kamu suka artikel ini, jangan lupa 💖 save, 🗨️ comment, dan 🔁 share ke teman developer lainnya!
Sampai jumpa di tulisan berikutnya 👋