Cara Menembak Target di CSS

Untuk memberi warna pada dinding rumah, kamu harus tahu dulu dinding mana yang mau dicat (dapur, ruang tamu, atau seluruh rumah). Dalam CSS, cara kita "menunjuk" elemen HTML yang ingin didesain disebut Selectors. Ada 3 jenis selector dasar yang wajib kamu kuasai.

1. Element Selector (Tag Biasa)

Cara paling barbar dan luas. Jika kamu menggunakan nama tag HTML langsung tanpa tanda apapun di depannya, CSS akan mengubah SELURUH tag tersebut di seluruh website.

/* Ini akan membuat SEMUA tag <p> di website menjadi biru */
p {
  color: blue;
}

Kapan digunakan? Hanya untuk memberikan gaya global dasar (seperti menghapus margin default pada tag body atau mengatur font default).

2. Class Selector (Pakai Titik . )

Ini adalah selector yang paling sering digunakan (90% waktu codingmu akan menggunakan ini). Class ditandai dengan tanda titik. Satu class bisa dipakai berulang kali oleh banyak elemen HTML yang berbeda.

/* CSS */
.tombol-merah {
  background-color: red;
  color: white;
}

<!-- HTML -->
<button class="tombol-merah">Hapus</button>
<a href="#" class="tombol-merah">Keluar</a>

Kapan digunakan? Kapanpun kamu ingin membuat gaya yang bisa didaur ulang (reusable) ke banyak elemen sekaligus.

3. ID Selector (Pakai Pagar # )

ID ditandai dengan tanda pagar atau hashtag. Aturan emas dari ID adalah: Satu ID hanya boleh ada SATU di dalam sebuah halaman web. ID bersifat unik dan sangat spesifik.

/* CSS */
#navbar-utama {
  height: 60px;
}

<!-- HTML -->
<nav id="navbar-utama">...</nav>

Kapan digunakan? Sangat jarang digunakan untuk *styling* murni saat ini. ID lebih sering dipakai sebagai penanda (anchor) untuk diakses oleh JavaScript (getElementById) atau link lompat (Scroll to). Biasakan menggunakan Class untuk urusan CSS.

Hierarki Kekuatan (Specificity)

Bagaimana jika sebuah tag

ditargetkan oleh ketiga selector tadi dengan warna yang berbeda-beda? Siapa yang menang?

CSS memiliki aturan kasta (Specificity):
ID > Class > Element

Kasta ID sangat kuat. Jika ID mengatakan warna Teks adalah Kuning, maka perintah warna Merah dari Class akan diabaikan oleh browser.

Kesimpulan

Sebagai *best practice*, gunakan Class (Titik) untuk merancang layout dan gaya elemenmu. Hindari menggunakan Element Selector untuk styling komponen spesifik karena akan merusak halaman lain, dan hindari styling dengan ID agar kodemu tidak kaku dan susah ditimpa (override) di kemudian hari.