Abd. Asis

Di bab sebelumnya, kamu sudah paham bahwa setiap rule CSS dimulai dengan selektor — instruksi kepada browser untuk memilih elemen mana yang akan diberi gaya. Kita sudah pakai beberapa selektor sederhana: h1, p, body. Tapi CSS punya lebih dari sekadar itu. Ada cara untuk menarget elemen berdasarkan class, berdasarkan ID, bahkan menarget semua elemen sekaligus. Pilihan selektor yang tepat menentukan seberapa presisi dan seberapa efisien kode CSS yang kamu tulis.

Type Selector

Type selector — juga disebut element selector — adalah selektor yang paling langsung: kamu cukup menyebutkan nama tag HTML-nya.

/* profil.css */
p {
  color: #4b5563;
  line-height: 1.7;
}

h2 {
  font-size: 1.5rem;
  margin-bottom: 12px;
}

Setiap rule di atas berlaku untuk semua elemen <p> dan semua elemen <h2> di halaman. Ini berguna saat kamu ingin menetapkan gaya dasar yang konsisten — misalnya semua paragraf punya line-height yang sama, atau semua heading level dua punya ukuran font yang seragam.

Keterbatasannya: type selector tidak bisa membedakan dua <p> yang berbeda fungsi. Kalau kamu punya paragraf biasa dan paragraf yang berperan sebagai peringatan, keduanya akan mendapat gaya yang sama.

Class Selector

Class selector menarget elemen berdasarkan nilai atribut class-nya. Di CSS, class selector ditulis dengan awalan titik (.) diikuti nama class.

/* profil.css */
.peringatan {
  background-color: #fef3c7;
  border-left: 4px solid #f59e0b;
  padding: 12px 16px;
  color: #92400e;
}

<p>Paragraf biasa yang tidak terpengaruh.</p>
<p class="peringatan">Pastikan file HTML disimpan sebelum membuka di browser.</p>

Hanya elemen dengan class="peringatan" yang mendapat gaya tersebut. Ini langsung menyelesaikan keterbatasan type selector tadi — kamu bisa punya banyak <p> dengan tampilan berbeda-beda tergantung class yang diberikan.

Satu class bisa dipakai di banyak elemen, dan satu elemen bisa punya banyak class sekaligus — cukup pisahkan dengan spasi:

<p class="peringatan teks-kecil">Pesan peringatan dengan teks lebih kecil.</p>

/* profil.css */
.teks-kecil {
  font-size: 0.875rem;
}

Browser membaca kedua class secara bersamaan, jadi elemen tersebut mendapat gaya dari .peringatan dan .teks-kecil.

Beri nama class berdasarkan tujuan atau peran elemen, bukan berdasarkan tampilannya. .peringatan jauh lebih baik dari .kotak-kuning karena tetap bermakna meskipun warnanya nanti berubah.

ID Selector

ID selector menarget elemen berdasarkan atribut id. Di CSS, ID selector ditulis dengan awalan tanda pagar (#).

/* profil.css */
#judul-utama {
  font-size: 2.5rem;
  color: #1a2744;
  letter-spacing: -1px;
}

<h1 id="judul-utama">Portofolio Saya</h1>

Perbedaan mendasar antara ID dan class: ID harus unik dalam satu halaman. Tidak boleh ada dua elemen dengan id="judul-utama" di halaman yang sama. Ini yang membuat ID selector cocok untuk elemen yang memang hanya muncul sekali — seperti header halaman, navigation bar, atau footer.

ID selector punya spesifisitas yang jauh lebih tinggi dibanding class selector. Artinya, gaya yang ditetapkan lewat ID lebih susah di-override oleh selector lain. Untuk styling yang perlu fleksibel dan mudah ditimpa, gunakan class. ID lebih baik digunakan untuk keperluan JavaScript atau anchor link, bukan sebagai hook CSS utama.

Universal Selector

Universal selector ditulis dengan tanda bintang (*) dan menarget semua elemen di halaman tanpa terkecuali.

/* reset.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Ini adalah pola yang sangat umum disebut CSS reset — menghapus margin dan padding bawaan browser agar kamu mulai dari kanvas yang bersih. Setiap browser punya gaya default sendiri (Chrome, Firefox, Safari masing-masing memberi padding yang berbeda pada elemen tertentu), dan universal selector adalah cara cepat untuk menetralisasi semua perbedaan itu sekaligus.

Universal selector juga bisa dikombinasikan dengan selector lain, tapi penggunaan tersebut lebih jarang dan akan kita bahas di bab-bab berikutnya.

Selector List (Grouping)

Ketika beberapa elemen perlu mendapat gaya yang sama, kamu bisa menuliskan semua selektor dalam satu rule dengan memisahkan menggunakan koma. Ini disebut selector list atau grouping selector.

/* profil.css */
h1,
h2,
h3 {
  font-family: sans-serif;
  color: #1a2744;
  font-weight: 700;
}

Ini setara dengan menulis tiga rule terpisah dengan isi identik, tapi jauh lebih ringkas. Jika nanti kamu ingin mengubah warnanya, cukup ubah di satu tempat.

Selector list bisa mencampur berbagai jenis selector:

/* profil.css */
h1,
.subjudul,
#caption-foto {
  font-family: sans-serif;
  line-height: 1.3;
}

Rule di atas menerapkan gaya yang sama ke semua <h1>, semua elemen dengan class subjudul, dan elemen dengan id caption-foto.

Kapan Pakai yang Mana

Keempat selektor ini melengkapi satu sama lain — tidak ada yang "terbaik" secara absolut, semua bergantung pada konteks:

Selektor	Kapan digunakan
Type selector	Gaya dasar yang berlaku untuk semua elemen jenis itu
Class selector	Komponen yang bisa dipakai berulang di banyak tempat
ID selector	Elemen unik yang hanya muncul sekali di halaman
Universal selector	Reset CSS, atau gaya yang benar-benar berlaku ke semua elemen
Selector list	Ketika beberapa elemen perlu gaya yang sama persis

Latihan

Untuk memperkuat pemahaman, coba kerjakan variasi berikut pada file profil.css yang sudah dibuat sejak Bab 1:

Tambahkan class sorotan ke beberapa teks di HTML. Beri class tersebut background-color: #dbeafe dan padding: 2px 4px. Amati bagaimana hanya teks dengan class itu yang berubah.
Beri id="bio" pada salah satu paragraf di HTML. Tulis rule ID selector untuk paragraf tersebut yang memberi font-style: italic dan color: #374151. Bandingkan hasilnya dengan paragraf lain yang tidak punya ID.
Tulis selector list untuk menarget semua elemen h1, h2, dan elemen dengan class sorotan sekaligus. Beri ketiganya font-weight: bold. Perhatikan bahwa elemen <h1> mendapat font-weight dari dua sumber (type selector dan selector list) — browser akan menggunakan yang paling spesifik atau yang paling akhir dideklarasikan.

Kamu sekarang punya empat cara untuk menarget elemen. Tapi sampai di sini, kita belum membahas satu hal yang cukup mendasar: CSS yang kamu tulis itu disimpan di mana, dan bagaimana cara menghubungkannya ke halaman HTML? Ada lebih dari satu cara melakukannya, dan masing-masing punya konsekuensi yang berbeda — terutama ketika ada lebih dari satu sumber CSS yang bekerja di halaman yang sama.

BAB 3: Selektor CSS

Type Selector

Class Selector

ID Selector

Universal Selector

Selector List (Grouping)

Kapan Pakai yang Mana

Latihan

Referensi