Belajar CSS Bagian 5 : CSS Selector: Cara Menentukan Elemen HTML yang Akan Diberi Style

Dalam CSS, selector adalah cara kita menentukan bagian mana dari HTML yang akan kita beri style. Selector ini ibarat “alamat tujuan” untuk CSS—tanpa selector, CSS tidak tahu harus bekerja di elemen yang mana.

Secara umum, ada 3 selector dasar yang paling sering digunakan, yaitu:

1. Selector Tag (Element Selector)

   Baca juga:
   • Panduan Lengkap: Cara Menulis Path PHP yang Benar untuk Include File (Header, Sidebar, Footer, dan Koneksi)
   • Belajar CSS Bagian 13 : Add Styling to About
   

2. Selector ID

3. Selector Class

Mari kita bahas satu per satu dengan contoh sederhana.

1. Selector Tag (Element Selector)

Selector tag adalah cara paling dasar dalam CSS. Kita langsung memanggil nama tag HTML yang ingin diberi style.

Contoh HTML

<p>Ini paragraf pertama</p> <p>Ini paragraf kedua</p> 

Contoh CSS

p { color: red; } 

Penjelasan

• Selector p berarti semua tag <p> di halaman HTML

• Semua paragraf akan berubah menjadi warna merah

• Selector ini bersifat global untuk tag tersebut

📌 Catatan:
Gunakan selector tag kalau memang ingin semua elemen dengan tag yang sama tampil seragam.

2. Selector ID (#id)

Selector ID digunakan untuk elemen yang sangat spesifik.
ID itu bersifat unik, artinya hanya boleh ada satu ID dengan nama yang sama dalam satu halaman HTML.

Contoh HTML

<p id="text">Paragraf ini spesial</p> 

Contoh CSS

#text { color: blue; } 

Penjelasan

• Tanda # menunjukkan bahwa ini adalah selector ID

• Hanya elemen dengan id="text" yang akan berubah

• Elemen lain tidak terpengaruh

📌 Praktik yang benar:
ID digunakan untuk:

• Header utama

• Konten penting

• Elemen yang hanya muncul satu kali

❌ Kurang disarankan:
Menggunakan ID yang sama di banyak elemen, walaupun secara teknis kadang masih “jalan”.

3. Selector Class (.class)

Selector class adalah yang paling fleksibel dan paling sering digunakan dalam CSS modern.

Berbeda dengan ID:

• Class boleh dipakai lebih dari satu elemen

• Cocok untuk style yang berulang (button, card, teks, dll)

Contoh HTML

<p class="text">Teks pertama</p> <p class="text">Teks kedua</p> <p class="text">Teks ketiga</p> 

Contoh CSS

.text { color: green; } 

Penjelasan

• Tanda . menunjukkan selector class

• Semua elemen dengan class="text" akan berubah

• Sangat cocok untuk:

  • Banyak button

  • Banyak card

  • Banyak teks dengan gaya yang sama