Class dan id

Beri tanda pada elemen agar bisa diatur CSS dan JavaScript.

Pahami konsepnya

Bayangkan lima kotak serupa di halamanmu dan kamu hanya ingin mengubah yang ketiga. Class dan id adalah sistem penamaan untuk itu: label yang dipasang pada elemen supaya bisa dipilih dan dimanipulasi — oleh CSS untuk tampilan, oleh JavaScript untuk perilaku.

Bedanya satu kalimat: class boleh dipakai banyak elemen sekaligus (satu nama, banyak pemakai), id hanya untuk satu elemen unik di seluruh halaman. Konsekuensinya di CSS: class dipanggil dengan tanda titik (.kotak) dan menimpa banyak elemen bersamaan, sedangkan id dipanggil dengan tanda pagar (#header) dan menunjuk tepat satu.

Praktik terbaiknya: gunakan class untuk gaya yang dipakai ulang (kartu, tombol, teks kecil) dan id untuk penanda unik seperti header halaman atau sasaran tautan jangkar. Satu elemen boleh memikul keduanya: <div id="berita" class="kartu"> sah dan lazim.

Coba contoh kode

<div class="kartu">Kartu 1</div>
<div class="kartu">Kartu 2</div>
<div class="kartu">Kartu 3</div>
<div id="sorotan">Kartu spesial</div>

<style>
  .kartu   { background: orange; padding: 12px; width: 120px; }
  #sorotan { background: blue;   padding: 12px; width: 200px;
             color: white; }
</style>

Tiga kartu memakai class yang sama sehingga satu aturan .kartu mewarnai semuanya sekaligus; #sorotan hanya menyentuh satu kotak istimewa itu. Inilah pola pikir "satu gaya, banyak pemakai" versus "satu penanda, satu elemen".

Latihan singkat

Buat tiga paragraf bermerek class yang sama dan satu heading ber-id, lalu beri warna latar berbeda untuk keduanya lewat CSS.