Menggunakan data-* dengan Pemilih Atribut CSS
Tata gaya elemen secara kondisional berdasarkan nilai atribut data.
Menggunakan data-* dengan Pemilih Atribut CSS adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Selektor Atribut CSS
Selektor atribut CSS mencocokkan elemen berdasarkan keberadaan dan nilai atribut: [data-state] mencocokkan elemen apa pun yang memiliki atribut data-state; [data-state="active"] hanya mencocokkan elemen ketika nilainya sama dengan "active".
Selektor Keberadaan
[data-tooltip] mencocokkan elemen yang memiliki atribut data-tooltip, apa pun nilainya. Gunakan ini untuk menerapkan gaya dasar tooltip pada setiap elemen yang memiliki data tooltip, sebelum mempertimbangkan isi tooltip.
Selektor Kecocokan Tepat
[data-theme="dark"] hanya mencocokkan elemen yang nilai data-theme-nya tepat sama dengan "dark". Ini memungkinkan penerapan gaya berdasarkan tema: terapkan token warna gelap saat elemen html memiliki data-theme="dark" yang ditetapkan oleh JavaScript.
Selektor Kecocokan Sebagian
[data-icon^="arrow"] mencocokkan nilai yang diawali dengan "arrow". [data-label$="ing"] mencocokkan nilai yang diakhiri dengan "ing". [data-tag*="feature"] mencocokkan nilai yang mengandung "feature". Ini memungkinkan penerapan gaya berdasarkan pola tanpa menambahkan banyak kelas.
Mesin Status dengan data-*
Modelkan status komponen dengan atribut data-state: [data-state="idle"], [data-state="loading"], [data-state="error"]. Aturan CSS untuk setiap status menggantikan beberapa nama kelas bersyarat, sehingga status tersimpan dalam satu atribut dan gaya tetap terpisah dengan jelas.
[data-state="loading"] .spinner { display: block; }
[data-state="error"] .message { color: var(--color-error); }Spesifisitas Selektor Atribut
Selektor atribut memiliki spesifisitas yang sama dengan selektor kelas (0,1,0). Jika digabungkan dengan selektor elemen: button[data-variant="primary"] memiliki spesifisitas (0,1,1). Rencanakan spesifisitas selektor atribut bersama aturan berbasis kelas untuk menghindari konflik.
Pola Tooltip
Tooltip CSS murni menggunakan data-tooltip: terapkan ::after { content: attr(data-tooltip) } saat diarahkan. Fungsi content: attr() membaca nilai atribut dan menggunakannya sebagai isi elemen semu — tidak diperlukan JavaScript atau elemen HTML tambahan.
[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
}data-* dibandingkan class untuk Gaya
Gunakan kelas untuk maksud gaya (is-active, has-error) dan atribut data untuk muatan data (data-user-id, data-count). Saat atribut yang sama mengendalikan perilaku (dibaca JS) dan gaya (dipilih CSS), data-* menghilangkan duplikasi antara JS dan CSS.
Menggabungkan Selektor data-*
Rangkai beberapa selektor atribut: [data-type="button"][data-size="large"] mencocokkan elemen yang memiliki kedua atribut tersebut. Ini menghasilkan pencocokan gabungan tanpa memerlukan kelas gabungan seperti .button-large, sehingga mengurangi penumpukan kelas.
Catatan Performa
Selektor atribut sedikit lebih lambat daripada selektor kelas saat resolusi gaya. Untuk gaya statis, utamakan kelas. Gunakan selektor atribut saat nilai atribut menentukan gaya (seperti data-state atau data-theme) dan berubah saat runtime — ketika satu atribut menggantikan beberapa kelas yang diaktifkan dan dinonaktifkan.
Peka Huruf Besar-Kecil
Secara default, pencocokan nilai atribut peka huruf besar-kecil dalam HTML (tetapi tidak untuk kode bahasa dalam XHTML). Tambahkan tanda i untuk pencocokan yang tidak peka huruf besar-kecil: [data-state="Active" i] mencocokkan "active", "Active", dan "ACTIVE".
Pemeriksaan Pengetahuan
Apa yang dilakukan selektor CSS [data-state="loading"] .spinner?
Ringkasan
Selektor atribut CSS mencocokkan atribut data-* berdasarkan keberadaan, nilai tepat, atau pola sebagian. Jika digabungkan dengan content: attr() untuk tooltip dan data-state untuk mesin status komponen, atribut data berfungsi sebagai pembawa data sekaligus pengait gaya CSS tanpa penumpukan kelas.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menggunakan data-* dengan Pemilih Atribut CSS” gratis?
Ya — teks lengkap “Menggunakan data-* dengan Pemilih Atribut CSS” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Menggunakan data-* dengan Pemilih Atribut CSS”?
Tata gaya elemen secara kondisional berdasarkan nilai atribut data. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Menggunakan data-* dengan Pemilih Atribut CSS” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Sintaks data-* dan Konvensi Penamaan
- Mengakses data-* dengan dataset dalam JavaScript
- Menggunakan data-* dengan Pemilih Atribut CSS
- Pola Dunia Nyata Tooltip Pelacakan Status