Belajar CSS - Selector Dasar dan Hirarki Spesifisitas

#Pendahuluan

Di episode 1 kalian mengenal selector paling sederhana: menargetkan elemen berdasarkan nama tag. Sekarang saatnya melebarkan kemampuan itu. Selector adalah kunci memilih elemen yang akan dihias secara presisi, dan CSS menyediakan banyak cara untuk melakukannya.

Episode 2 membahas dua hal besar: jenis-jenis selector dasar dan hirarki spesifisitas. Keduanya saling berkaitan. Semakin paham bobot sebuah selector, semakin mudah memprediksi aturan mana yang menang ketika dua aturan bentrok.

Mengapa topik ini penting? Sebagian besar bug styling yang membingungkan — "sudah ditulis tapi tidak berubah" — berakar pada pemahaman spesifisitas yang keliru. Kuasai episode ini, dan kalian tidak akan lagi menghafal trik untuk mengalahkan aturan lain.

#Jenis-Jenis Selector Dasar

#Selector Elemen, Class, dan ID

Tiga selector paling umum:

selector-dasar.css

h1 { color: navy; }
 
.btn {
  background-color: #2563eb;
  color: white;
}
 
#hero {
  padding: 24px;
  text-align: center;
}

h1 menargetkan semua elemen bertag h1; .btn menargetkan semua elemen berkelas btn; #hero menargetkan satu elemen ber-id hero. Kelas bersifat reusable, sedangkan id sebaiknya unik dalam satu halaman.

#Selector Atribut

Selector atribut menyeleksi berdasarkan keberadaan atau nilai atribut:

selector-atribut.css

a[href] { color: #2563eb; }
 
input[type="text"] { border: 1px solid #ccc; }
 
a[href^="https"] { font-weight: bold; }
 
img[alt$=".png"] { border-radius: 8px; }

^= berarti "diawali dengan", $= berarti "diakhiri dengan", dan *= berarti "mengandung". Selector ini berguna untuk menyasar link eksternal atau tipe input tertentu tanpa menambah class.

#Kombinasi Antar Elemen

CSS juga memungkinkan kombinasi elemen:

kombinasi.css

article p { line-height: 1.7; }
 
ul > li { list-style: square; }
 
h1 + p { margin-top: 4px; }
 
h1 ~ p { color: #374151; }

article p memilih semua p di dalam article (descendant); ul > li memilih li anak langsung ul (child); h1 + p memilih p yang langsung mengikuti h1 (adjacent sibling); h1 ~ p memilih semua p setelah h1 sebagai sibling.

#Hirarki Spesifisitas

#Cara Browser Menghitung Bobot

Spesifisitas dihitung seperti angka tiga digit:

• Selector elemen dan pseudo-element bernilai 0-0-1.
• Class, atribut, dan pseudo-class bernilai 0-1-0.
• ID bernilai 1-0-0.
• Inline style dihitung 1-0-0-0, lebih tinggi dari id.

Contoh:

spesifisitas.css

p { color: gray; }
.text { color: blue; }
#special { color: red; }

Jika elemen <p id="special" class="text"> memakai ketiganya, yang muncul adalah merah. Bobot #special (1-0-0) lebih tinggi dari .text (0-1-0) dan p (0-0-1). Selector p sederhana selalu kalah dari selector class yang lebih spesifik.

#Aturan Urutan Saat Bobot Sama

Ketika dua selector punya bobot identik, yang menang adalah yang ditulis paling akhir:

urutan.css

.btn { background-color: green; }
.btn { background-color: orange; }

Elemen berkelas btn akan berwarna oranye karena aturan kedua ditulis setelah yang pertama. Ini alasan file CSS harus ditulis dengan urutan yang masuk akal.

#Menghindari Perang Spesifisitas

Praktik terbaik adalah menjaga spesifisitas rendah dan sedatar mungkin. Hindari menumpuk selector seperti div#header .nav ul li a — bobotnya tinggi dan menyulitkan override. Cukup gunakan satu class yang jelas:

rekomendasi.css

.nav-link {
  color: #2563eb;
}

#Pseudo-Class Sederhana

Pseudo-class menargetkan state atau posisi khusus:

pseudo.css

a:hover { color: red; }
li:first-child { font-weight: bold; }
li:last-child { color: #6b7280; }

:hover berlaku saat kursor di atas elemen, :first-child memilih elemen pertama di antara saudaranya, dan :last-child elemen terakhir. Episode 13 akan membahas pseudo-class secara menyeluruh.

#Kesalahan Umum dan Solusinya

#Selector Terlalu Khusus

Selector seperti body div.main-content .card p hampir tidak mungkin di-override tanpa kekacauan. Solusinya: beri class langsung pada elemen target agar spesifisitas tetap rendah dan predictable.

#Lupa Menutup Selector

Satu tanda kurung kurawal yang terlewat membuat aturan berikutnya ikut tidak terbaca. Biasakan memformat otomatis dengan npx prettier --write css/style.css sebelum menyimpan.

#Penutup

Inti yang harus dibawa pulang:

• Selector elemen, class, id, dan atribut adalah fondasi seleksi elemen.
• Kombinasi descendant, child, dan sibling memungkinkan seleksi kontekstual.
• Spesifisitas dihitung seperti angka tiga digit; id menang atas class, class menang atas elemen.
• Bila bobot sama, aturan yang ditulis terakhir yang berlaku.
• Jaga spesifisitas rendah dan hindari selector bertumpuk.
• !important hanya untuk kasus ekstrem, bukan solusi harian.

Di episode 3 selanjutnya kita akan membahas properti teks, warna, dan latar belakang — cara mengatur font, warna teks, serta gambar dan warna latar belakang dengan contoh nyata. Siapkan style.css kalian untuk latihan berikutnya.