Coba bayangin kamu ngirim 1000 undangan kawinan. Mau dibedain warna amplop per kategori tamu: keluarga warna merah, teman kantor biru, tetangga RT hijau. Kamu butuh sistem nyari + ngelompokin — bukan satu-satu manual. CSS selector itu sistem nyari elemen di halaman: bisa generik (semua paragraf), bisa spesifik (satu tombol di header). Tanpa selector, CSS gak tau elemen mana yang mau distyle.

💡 80/20 selector. 99% styling cuma butuh 5 jenis selector dasar: tag, class, id, descendant ( ), pseudo-class (:hover). Selector advanced (:has(), :nth-child(2n+1), attribute) dipake buat kasus spesifik. Pemula sering kebanyakan kombinasi rumit padahal .btn-primary udah cukup.

• Element: Selector ini menunjuk tag HTML tertentu.

p {
  color: red
}

• id: Selector ini menunjuk elemen HTML dengan id tertentu. Ciri-ciri selector ini adalah menggunakan tanda pagar (#). Id selector sebaiknya digunakan oleh 1 elemen saja.

#nama-id {
  color: green
}

• class: Selector ini menunjuk elemen HTML dengan class tertentu. Ciri-ciri selector ini adalah menggunakan tanda titik (.). Class selector dapat digunakan oleh lebih dari 1 elemen.

.nama-class {
  color: blue
}

🎭 Analogi sehari-hari

Selector = alamat di amplop surat. Tag (p) = "untuk semua paragraf di rumah ini". #id = "untuk si Budi (satu orang)". .class = "untuk semua karyawan ber-rompi merah (banyak orang)". Kurir CSS antar style ke alamat yang cocok.

⚠️ Jebakan yang sering ditemui

• #id cuma boleh sekali per halaman — invalid HTML kalau dua elemen sama id. Pakai .class untuk grup.
• Selector specificity — #id >> .class >> tag. Salah urutan = style tidak apply (tertimpa yang lebih kuat).
• !important = kabur dari aturan = bug magnet. Hindari kecuali override 3rd party.
• Universal selector * lambat di tree besar — pakai hanya untuk reset awal.
• Spasi di selector matters — .parent .child = nested descendant. .parent.child (tanpa spasi) = elemen yang punya KEDUA class.
• Selector salah ketik diam-diam — CSS tidak warning kalau selector tidak match elemen apapun. Cek di DevTools.