Selector adalah bagian aturan CSS yang menunjuk elemen mana yang mau diatur. Tanpa selector, browser gak tahu gayanya buat siapa. Ada tiga selector dasar: lewat nama tag, lewat class, dan lewat id.
🧪 Tebakan cepat: selector
#headermemilih tag<header>atau elemen lain? Tebak dulu, jawabannya ada di bagian "Tag, class, dan id".
Aturan yang memilih semua paragraf
<h2>Menu Warung Bu Tini</h2>
<p class="promo">Nasi goreng</p>
<p id="spesial">Sate ayam</p>
<p class="promo">Es teh manis</p>
<div class="promo">Gratis kerupuk tiap Jumat</div>
<style>
p {
color: red;
}
</style>
padalah selector. Di sini isinya nama tag, jadi aturannya kena ke semua<p>di halaman.{dan}(kurung kurawal) membungkus pengaturan buat selector itu.color: red;adalah deklarasi: properticolor(warna teks), titik dua, nilaired, lalu titik koma sebagai penutup.
Hasilnya, Nasi goreng, Sate ayam, dan Es teh manis jadi merah. Judul dan <div> tetap hitam, karena tag-nya bukan p.
Aturan seperti ini ditulis di dalam tag <style>. Atribut style="..." di sebuah tag gak pakai selector, karena dia cuma nempel ke tag itu sendiri. Jadi kalau mau memilih elemen lewat selector, tulis aturannya di <style>.
Tag, class, dan id
- Tag: nama tag-nya saja, tanpa
<dan>.h2memilih semua<h2>,pmemilih semua<p>. Ini disebut element selector. - Class: titik
.lalu nama class..promomemilih semua elemen yang punyaclass="promo", apa pun tag-nya, jadi<div class="promo">juga kena. Satu class boleh dipakai banyak elemen. - Id: tanda pagar
#lalu nama id.#spesialmemilih elemen denganid="spesial". Satu id cuma boleh dipakai satu elemen per halaman, jadi selector id mengenai satu elemen saja.
Titik dan pagar cuma ditulis di CSS. Di HTML tetap class="promo" dan id="spesial", tanpa simbol.
Jawaban tebakan: #header memilih elemen dengan id="header", bukan tag <header>. Buat tag <header>, tulis header tanpa pagar.
⚠️ Jebakan yang sering ketemu
- Menulis kurung sudut di selector.
<h2> { }gak valid. Tulish2 { }. - Titik ikut masuk ke HTML.
class=".promo"bikin.promogak kena. Titiknya cuma di CSS. - Id yang sama di dua elemen. Kalau gayanya buat banyak elemen, pakai class.
- Huruf besar-kecil beda.
.Promogak memilihclass="promo". CSS juga gak ngasih tahu kalau selector-mu gak kena apa-apa, jadi cek ejaannya.
💡 Kalau bentrok, yang lebih khusus menang. Satu elemen bisa kena aturan tag, class, dan id sekaligus. Kalau warnanya beda, id menang dari class, dan class menang dari tag. Detailnya ada di pelajaran Specificity.
TL;DR: Selector menunjuk elemen yang mau diatur, dan aturannya ditulis di <style>: selector { properti: nilai; }. Nama tag (p) memilih semua tag itu, titik (.promo) memilih semua elemen dengan class itu, pagar (#spesial) memilih satu elemen dengan id itu. Simbolnya cuma di CSS, bukan di HTML.
