Kalkulator spesifisitas CSS: selector mana yang menang

Cara memakai

Ketik selector di Selector, ditulis seperti di lembar gaya Anda.
Ketik selector kedua di Selector kedua (opsional) untuk membandingkan keduanya, atau biarkan kosong.
Baca Spesifisitas (a, b, c) untuk selector pertama, dan Aturan mana yang menang jika Anda mengisi dua selector.
Gunakan tabel Bagian yang dihitung untuk melihat bagian mana dari setiap selector yang menghasilkan setiap angka.

Cara tiga angka dihitung

Selectors Level 3 Recommendation menghitung selector dalam tiga kolom. Kalkulator ini membandingkan angkanya dari kiri ke kanan: a lebih dulu, lalu b, lalu c. Selector universal * dan kombinator seperti > dan + diabaikan.

a adalah jumlah selector ID, seperti #nav.
b adalah jumlah selector kelas seperti .active, selector atribut seperti [href], dan pseudo-class seperti :hover.
c adalah jumlah selector tipe seperti li atau a, dan pseudo-element seperti ::before.

Pseudo-class dengan argumen

:is(), :not() dan :has() dihitung sebagai argumennya yang paling spesifik, sehingga :is(#a, .b) bernilai (1, 0, 0). :where() tidak dihitung sama sekali. :nth-child() dihitung sebagai satu pseudo-class ditambah selector paling spesifik dalam daftar "of S"-nya, sehingga :nth-child(even of li, .item) bernilai (0, 2, 0). Aturan ini berasal dari Selectors Level 4 draft, yang masih berupa Editor's Draft dan bisa berubah.

Yang tidak dilakukan kalkulator ini

Ia menghitung pseudo-element dengan argumen, seperti ::part(x), sebagai satu pseudo-element, dan tidak membaca argumennya.
Ia tidak membaca penyarangan dengan &, dan menerima satu selector per kotak, bukan daftar dengan koma.
Ia tidak bisa melihat lembar gaya Anda, sehingga ketika dua selector sama ia mengatakan bahwa aturan yang lebih akhir menang dan urutannya diserahkan kepada Anda.

Contoh kerja: tautan di bilah navigasi

Selector pertama, #nav li.active > a:hover, punya satu ID, yaitu #nav. Ia punya dua kelas dan pseudo-class, yaitu .active dan :hover, serta dua tipe, yaitu li dan a. Spesifisitasnya (1, 2, 2). Selector kedua, #nav a, punya satu ID dan satu tipe, sehingga spesifisitasnya (1, 0, 1). Selector pertama menang, karena a-nya sama dan b serta c-nya lebih tinggi.

Selector	a	b	c
#nav li.active > a:hover	1	2	2
#nav a	1	0	1

Pertanyaan yang sering diajukan

Mengapa ID dihitung di kolom pertama?

Kalkulator ini membandingkan kolom dari kiri ke kanan, sehingga kolom ID a diputuskan lebih dulu. Selector dengan satu ID lebih banyak punya a yang lebih tinggi, dan kelas serta tipe di b dan c tidak dilihat dalam kasus itu.

Apakah urutan aturan itu penting?

Hanya jika dua selector punya spesifisitas yang sama. CSS Cascade Level 4 menyatakan bahwa deklarasi terakhir dalam urutan dokumen yang menang pada titik itu, sehingga aturan yang lebih akhir berlaku.

Mengapa :not(#a) menambah spesifisitas?

Pseudo-class :not() sendiri tidak dihitung, tetapi argumennya dihitung. Contoh #s12:not(FOO) di Selectors Level 3 bernilai (1, 0, 1): satu ID dari #s12, dan satu tipe dari argumen FOO.

Apakah selector universal dan kombinator menambah sesuatu?

Tidak. Selector universal diabaikan, begitu juga kombinator seperti >, + dan ~. Contoh * di bagian Level 3 punya spesifisitas (0, 0, 0).

Apakah kalkulator ini memperhitungkan gaya sebaris dan !important?

Tidak. Kalkulator ini menghitung satu selector. Kaskade membandingkan asal dan kepentingan lebih dulu sebelum spesifisitas, sehingga aturan yang diberi !important atau gaya sebaris bisa menang apa pun skor selector-nya. Bandingkan hanya dua selector yang mengatur properti yang sama dengan kepentingan yang sama.

Apakah selector yang saya ketik dikirim ke mana pun?

Tidak. Penguraian dijalankan di peramban Anda, dan tidak ada yang Anda ketik yang disimpan atau dikirim ke server kami. Periksa hasilnya sebelum Anda mengubah lembar gaya.

Sumber

Angka dan teks terakhir diperiksa pada Kamis, 12 November 2026.

Hasil