CSS Selector & Specificity

Apa Itu CSS Selector?

CSS Selector adalah cara kita menentukan elemen HTML mana yang akan diberikan style. Selector memberi tahu browser:

“Terapkan aturan ini ke elemen yang saya pilih.”

Contoh:

h1 {
  color: navy;
}

Selector h1 menarget semua elemen <h1> dan memberi warna biru dongker.

Apa Itu Specificity?

Specificity (Spesifisitas) adalah sistem perhitungan prioritas dalam CSS.
Ketika lebih dari satu aturan CSS cocok untuk elemen yang sama, specificity menentukan aturan mana yang akan diterapkan.

Contoh:

#judul {
  color: red;
}

h1 {
  color: blue;
}

Elemen <h1 id="judul"> akan berwarna merah, karena selector #judul lebih spesifik daripada h1.

Selector Umum

Jenis Selector	Contoh	Keterangan
Universal	*	Menarget semua elemen
Type	p, h1	Berdasarkan tag
Class	.box	Berdasarkan class
ID	#main	Berdasarkan ID unik
Grouping	h1, h2, p	Beberapa sekaligus

* {
  margin: 0;
}
.card {
  background: #fff;
}

Kombinasi & Struktur

Jenis Selector	Contoh	Keterangan
Descendant	div p	Elemen di dalam elemen
Child	ul > li	Langsung di dalam
Adjacent Sibling	h2 + p	Saudara langsung setelah
General Sibling	h2 ~ p	Semua saudara setelah
Attribute	input[type="email"]	Berdasarkan atribut
Pseudo-class	a:hover, input:focus	Berdasarkan kondisi
Negation	:not(.aktif)	Elemen yang bukan kelas tertentu

.card > h2 {
  font-size: 20px;
}

input[type="checkbox"]:checked {
  accent-color: green;
}

Specificity & Selector Kompleks

Specificity Score

Selector	Skor
Inline style	1000
ID selector (#id)	100
Class, pseudo-class	10
Type selector (div, p)	1

Contoh perhitungan:

#hero .title span { ... } → 100 (ID) + 10 (class) + 1 (tag) = **111**

!important — Penanda Darurat

.button {
  color: red !important;
}

Gunakan hanya jika benar-benar terpaksa. Lebih baik atur struktur CSS dan specificity dengan baik.

Selector Kompleks

section > article:first-child h2:not(.highlight) {
  color: navy;
}

Best Practices

1. Gunakan class, hindari ID untuk styling umum
2. Hindari selector terlalu dalam (.a .b .c .d)
3. Gunakan arsitektur seperti BEM (metode penamaan class CSS yang konsisten dan terstruktur)
4. Jangan berlebihan pakai !important
5. Pisahkan CSS jadi modular (file terpisah per bagian UI)