Specificity

Ketika dua aturan menunjuk elemen yang sama dan mengatur properti yang sama dengan nilai berbeda, browser harus memilih satu pemenang. Kriteria utamanya adalah specificity: bobot yang dihitung dari komposisi selector. Memahami perhitungan ini mengubah kebiasaan menebak — mengapa sebuah gaya tidak berlaku — menjadi membaca angka. Chapter ini membahas formula tiga komponen, perhitungan pada kasus bertingkat, dan peran :is(), :not(), :has(), serta :where().

Formula Tiga Komponen #

Specificity ditulis sebagai tiga angka (a, b, c) yang dibaca dari kiri ke kanan, bukan sebagai satu bilangan desimal. Komponen a menghitung ID, b menghitung class, attribute selector, dan pseudo-class, sedangkan c menghitung type selector dan pseudo-element. Universal selector * dan combinator tidak menyumbang apa pun; rincian resminya ada pada Specificity di MDN .

Perbandingan dilakukan angka demi angka dari kiri: (0, 2, 0) mengalahkan (0, 1, 9), dan (1, 0, 0) mengalahkan (0, 99, 0). Bila dua aturan sama kuat, urutan sumber menentukan — aturan yang ditulis belakangan menang.

Kasus Bertingkat pada Satu Elemen #

Demo memuat satu paragraf yang ditunjuk empat aturan sekaligus. Keempatnya cocok, sehingga pemenang ditentukan murni oleh specificity:

p {
  color: rgb(100, 116, 139);
}

.teks {
  color: rgb(13, 148, 136);
}

p.teks {
  color: rgb(2, 132, 199);
}

#utama {
  color: rgb(220, 38, 38);
}

<p id="utama" class="teks">Paragraf dengan id utama dan class teks.</p>

Mari kita telaah keempat aturan tersebut:

1. Baris 1 (p): (0, 0, 1) — bobot paling rendah di antara keempatnya.
2. Baris 5 (.teks): (0, 1, 0) — komponen b lebih besar daripada aturan pertama.
3. Baris 9 (p.teks): (0, 1, 1) — type selector menambah komponen c.
4. Baris 13 (#utama): (1, 0, 0) — komponen a langsung menang pada tahap pertama perbandingan.
5. Hasil akhirnya paragraf tampil merah, warna dari #utama.

:is(), :not(), :has(), dan :where() #

Pseudo-class fungsional :is(), :not(), dan :has() memakai specificity dari argumen paling spesifik di dalamnya — bahkan bila anggota itu tidak menunjuk elemen mana pun. Sebaliknya :where() selalu bernilai nol, sehingga pas untuk gaya yang ingin mudah ditimpa:

:is(#sorotan, .teks-2) {
  color: rgb(124, 58, 237);
}

:where(#sorotan, .teks-2) {
  color: rgb(234, 88, 12);
}

Pada elemen class="teks-2", kedua aturan cocok tetapi :is() menyumbang (1, 0, 0) — diambil dari argumen #sorotan — sedangkan :where() bernilai (0, 0, 0). Hasilnya ungu dari :is(), meskipun aturan :where() ditulis belakangan.

Specificity yang sama berarti urutan sumber yang memutuskan. Dua class berikut menyumbang (0, 1, 0) berdua, sehingga warna merah dari aturan terakhir yang tampil:

.satu {
  color: rgb(13, 148, 136);
}

.dua {
  color: rgb(220, 38, 38);
}

<p class="satu dua">Dua class, dua warna — aturan terakhir menang.</p>

Kasus keempat pada demo memperlihatkan perbandingan (0, 2, 0) melawan (0, 1, 1): aturan .kartu .judul ditulis lebih dulu tetapi tetap menang atas .kartu h3 karena komponen b lebih besar.

Mengapa !important Bukan Solusi Kilat #

Deklarasi !important melompati perbandingan specificity normal dan memaksa sebuah nilai menang. Memakainya untuk membenahi satu konflik memaksa konflik berikutnya dijawab dengan !important lagi, dan stylesheet perlahan sulit diatur ulang. Perlakukan !important sebagai pintu darurat terakhir — misalnya untuk utility class — bukan kebiasaan; aturan penentuannya dibahas tuntas pada section Cascade dan Inheritance .

Hasil di Browser:

Paragraf id utama + class teks tampil merah (color: rgb(220, 38, 38)) —
#utama (1,0,0) menang atas p (0,0,1), .teks (0,1,0), dan p.teks (0,1,1).
Paragraf .teks-2 tampil ungu (color: rgb(124, 58, 237)) — :is() memakai
argumen terkuat (1,0,0) dan mengalahkan :where() (0,0,0).
Paragraf class "satu dua" tampil merah (color: rgb(220, 38, 38)) —
specificity sama, aturan terakhir menang.
Judul .judul di dalam kartu tampil biru (color: rgb(2, 132, 199)) —
(0,2,0) mengalahkan (0,1,1) meskipun ditulis lebih dulu.

Demo pada chapter ini membawa empat elemen uji dengan atribut data-expected yang memverifikasi keempat hasil di atas lewat headless browser.