Kadang dua aturan CSS mengatur hal yang sama di elemen yang sama, misalnya satu bilang paragrafnya biru, satu lagi bilang merah. Browser harus memilih satu pemenang. Specificity adalah cara browser menimbang selector mana yang lebih kuat: selector yang lebih khusus menang.
🧪 Tebakan cepat:
.teks { color: green; }ditulis di atas,p { color: blue; }ditulis paling bawah. Paragraf<p class="teks">jadi warna apa? Tebak dulu, jawabannya ada di bagian "Tiga aturan, satu paragraf".
Tiga aturan, satu paragraf
<p id="judul" class="teks">Warnai aku merah!</p>
<style>
p { color: blue; }
.teks { color: green; }
#judul { color: red; }
</style>
<p id="judul" class="teks">punya tiga nama sekaligus: tag-nyap, class-nyateks, id-nyajudul. Jadi ketiga aturan di bawahnya kena ke paragraf yang sama.pmemilih semua paragraf. Paling umum, paling lemah..teks(titik, lalu nama class) memilih elemen denganclass="teks". Lebih khusus, jadi lebih kuat.#judul(tanda pagar, lalu nama id) memilih elemen denganid="judul". Satu id cuma dipakai satu elemen per halaman, jadi ini yang paling khusus.
Hasilnya, teksnya merah. Urutan kekuatannya: tag paling lemah, lalu class, lalu id.
Urutan tulis baru berpengaruh kalau kekuatannya sama persis. Kalau beda, yang lebih kuat tetap menang di mana pun dia ditulis. Jawaban tebakan: hijau, karena .teks lebih kuat dari p, walau p ditulis belakangan.
Hitung skornya kayak papan medali
Bayangin papan medali Olimpiade. Negara dengan 1 emas tetap di atas negara dengan 0 emas dan 10 perak, karena yang dibandingkan duluan adalah emasnya. Perak baru dihitung kalau emasnya seri.
Skor selector juga tiga angka, ditulis (id, class, tag). Id itu emas, class itu perak, tag itu perunggu. Hitung berapa banyak masing-masing di selector-nya:
pskornya (0, 0, 1)..teksskornya (0, 1, 0).#header .titleskornya (1, 1, 0): satu id, satu class..header .title.mainskornya (0, 3, 0): tiga class, tanpa id.
#header .title menang, karena dia punya satu emas dan lawannya gak punya sama sekali. Atribut seperti [type] dan pseudo-class seperti :hover dihitung sebagai class.
Paling kuat: inline style
CSS juga bisa ditulis langsung di tag-nya lewat atribut style. Ini disebut inline style, dan dia mengalahkan semua selector di <style>, termasuk id:
<p id="teks" style="color: green;">Warnai aku hijau!</p>
Atribut style ditulis di dalam tag pembuka, berderet dengan atribut lain. Isinya sama kayak isi aturan CSS: properti, titik dua, nilai, titik koma. Jadi urutan dari yang paling kuat: inline style, id, class, tag.
⚠️ Jebakan yang sering ketemu
- Mengubah atau menghapus CSS lama. Kalau latihannya minta CSS yang ada dibiarkan, menangkan lewat selector yang lebih kuat, jangan edit aturan lamanya.
- Lupa tanda pagar atau titik.
judul { }mencari tag bernama judul, bukan id. Tulis#judulbuat id dan.teksbuat class. !importantbuat semua masalah.color: red !important;memang mengalahkan semuanya, tapi bikin aturan itu susah ditimpa nanti. Simpan buat keadaan darurat.
TL;DR: Kalau dua aturan berebut, selector yang lebih khusus menang. Skornya (id, class, tag) dibandingkan dari kiri, kayak emas, perak, perunggu di papan medali. Inline style (style="...") mengalahkan semua selector. Urutan tulis cuma jadi penentu kalau skornya sama, dan yang ditulis belakangan menang.
