← CSS4 / 62
Specificity: kenapa CSS-ku tidak jalan
Kalau dua aturan mengatur properti yang sama, yang menang bukan yang terakhir ditulis — tapi yang specificity-nya lebih tinggi. Urutannya: id (100) > class (10) > tag (1). Karena itu #judul { color: red } mengalahkan h1 { color: blue } walau ditulis lebih dulu. Ini penyebab nomor satu frustrasi 'CSS saya tidak berpengaruh'.
👀 Contoh dulu
/* HTML: <p id="intro" class="tebal">Teks</p> */
p { color: black; } /* skor 1 */
.tebal { color: blue; } /* skor 10 → menang atas p */
#intro { color: green; } /* skor 100 → menang semua */Hasilnya: Teks menjadi HIJAU, karena #intro (100) mengalahkan .tebal (10) dan p (1) — bukan karena ditulis terakhir.
💡 Kalau specificity-nya sama, baru urutan penulisan yang menentukan. Hindari id di CSS agar tidak sulit ditimpa.
📝 Sekarang giliranmu
Elemen <h1 id="judul" class="besar"> sudah diberi warna biru lewat selector tag. Buat teksnya menjadi hijau menggunakan selector class .besar (bukan id).
Preview