Class dan ID Selector

Type selector hanya mampu memilah elemen berdasarkan jenisnya, sementara halaman nyata menuntut pemilahan berdasarkan peran: kotak informasi, kotak peringatan, tombol utama, dan sebagainya. Class dan ID adalah label yang kita tempelkan sendiri ke elemen HTML, lalu ditunjuk oleh CSS dengan tanda titik untuk class dan tanda pagar untuk ID. Keduanya adalah selector yang paling sering kita tulis sehari-hari. Chapter ini membahas cara kerja keduanya, teknik multi-class, dan panduan memilih di antara keduanya.

Class Selector: Label untuk Sekelompok Elemen #

Selector class diawali titik (.) dan menunjuk setiap elemen yang atribut class-nya memuat nama tersebut. Satu nama class boleh dipakai berulang di elemen sebanyak apa pun — di sinilah class berbeda dari type selector yang terikat pada jenis tag. Contoh berikut membangun dua gaya kotak pesan:

.info {
  color: rgb(13, 148, 136);
  border-left: 4px solid rgb(13, 148, 136);
}

.peringatan {
  color: rgb(180, 83, 9);
  background-color: rgb(254, 243, 199);
}

<div class="info">Koneksi database berhasil dibuat.</div>
<div class="peringatan">Kuota penyimpanan hampir penuh.</div>

Hasil di Browser:

Kotak .info tampil teal (color: rgb(13, 148, 136)) dengan garis kiri
setebal 4px (border-left-width: 4px).
Kotak .peringatan tampil oranye tua di atas kuning muda:
color rgb(180, 83, 9), background-color rgb(254, 243, 199).

Mari kita telaah aturan di atas baris demi baris:

1. Baris 1 (.info {): titik menandai class selector; aturan ini menunjuk setiap elemen ber-class info, apa pun jenis tag-nya — div, p, atau span.
2. Baris 2–3: teks pesan berwarna teal dan diberi garis tebal 4px di sisi kiri sebagai penanda visual.
3. Baris 6 (.peringatan {): nama kedua menunjuk kelompok elemen lain; tidak ada larangan memakai keduanya pada elemen yang sama.
4. Baris 7–8: pesan peringatan diberi warna oranye tua di atas latar kuning muda agar langsung terlihat berbeda.

ID Selector: Satu Elemen Khusus #

Selector ID diawali tanda pagar (#) dan menunjuk elemen dengan atribut id yang bernilai sama. Kontraknya jelas: satu ID dipakai untuk satu elemen pada satu halaman. Browser tidak melarang ID ganda, tetapi tautan anchor, label pada form, dan JavaScript mengandalkan keunikan itu — melanggarnya membuat perilaku halaman sulit diprediksi. Berikut gaya untuk satu kotak sorotan:

#sorotan {
  background-color: rgb(79, 70, 229);
  color: rgb(255, 255, 255);
}

Dari sisi kekuatan, class menyumbang specificity (0, 1, 0) sedangkan ID menyumbang (1, 0, 0) — ID jauh lebih kuat daripada class mana pun. Pembahasan tuntasnya menanti di Chapter Specificity ; untuk sekarang cukup diingat bahwa aturan ID sulit ditimpa oleh aturan class biasa.

Menggabungkan Beberapa Class #

Satu elemen boleh membawa lebih dari satu class sekaligus, dipisahkan spasi: class="info peringatan". Urutan penulisan di atribut tidak berpengaruh pada hasil; yang menentukan adalah urutan aturan di stylesheet dan specificity. Untuk menunjuk elemen yang memiliki KEDUA class sekaligus, tulis keduanya tanpa spasi:

.info.peringatan {
  color: rgb(146, 64, 14);
  background-color: rgb(254, 243, 199);
}

Compound selector .info.peringatan menyumbang specificity (0, 2, 0), sehingga warnanya menang atas aturan .info maupun .peringatan yang masing-masing hanya (0, 1, 0). Pola ini lazim untuk kombinasi state, misalnya button.aktif pada tombol yang sedang aktif.

Memilih antara Class dan ID #

Gunakan nama yang pendek, deskriptif, dan menyatakan peran alih-alih tampilan: .peringatan lebih tahan perubahan daripada .kuning, karena warna bisa berubah sedangkan perannya tidak. Penulisan kebab-case seperti menu-utama menjadi konvensi yang lazim di stylesheet.

Demo pada chapter ini memuat empat kotak dengan atribut data-expected yang memverifikasi warna teks, tebal garis kiri, dan warna latar pada tiap kotak — termasuk bukti bahwa compound selector dua class mengalahkan aturan class tunggal.