Kategori: Alat pengembang
Kalkulator Spesifisitas CSS
Bandingkan spesifisitas selektor sebagai skor A-B-C
Masukkan satu atau beberapa selektor CSS untuk menghitung spesifisitasnya sebagai skor ID-kelas-elemen (A-B-C), diurutkan sehingga Anda bisa melihat aturan mana yang akan menang. Berjalan sepenuhnya di browser Anda.
| Selektor | Spesifisitas (A-B-C) | ID | Kelas, atribut, pseudo-class | Elemen, pseudo-element |
|---|---|---|---|---|
#nav .item > a:hover | 1-2-1 | 1 | 2 | 1 |
.card.featured | 0-2-0 | 0 | 2 | 0 |
button | 0-0-1 | 0 | 0 | 1 |
* | 0-0-0 | 0 | 0 | 0 |
Semua yang ada di halaman ini diproses di peramban Anda. Tidak ada yang diunggah.
Apa fungsi alat ini
Ketika dua aturan CSS menargetkan elemen yang sama, yang memiliki spesifisitas lebih tinggi yang menang, bukan yang ditulis paling akhir. Spesifisitas dihitung sebagai tiga angka: A untuk selektor ID, B untuk kelas, selektor atribut, dan pseudo-class, serta C untuk selektor elemen dan pseudo-element. Alat ini mengurai setiap selektor yang Anda masukkan, termasuk :not(), :is(), :has(), dan :where() yang spesifisitasnya nol, lalu melaporkan skor A-B-C-nya sehingga Anda bisa membandingkan selektor secara langsung tanpa perlu menebak.
Cara memakainya
- Masukkan satu selektor per baris, misalnya #nav .item > a:hover.
- Baca skor spesifisitas A-B-C dari setiap selektor.
- Urutkan berdasarkan spesifisitas untuk melihat selektor mana yang akan menang jika terjadi konflik.
Privasi
Alat ini berjalan sepenuhnya di peramban Anda. Masukan Anda tidak pernah diunggah, disimpan, atau dibagikan — menutup tab akan menghapusnya.
Pertanyaan yang sering diajukan
- Apakah CSS saya diunggah ke suatu tempat?
- Tidak. Proses penguraian berjalan di JavaScript pada halaman ini, sehingga selektor dari stylesheet pribadi Anda tidak pernah meninggalkan perangkat Anda.
- Bagaimana :not(), :is(), atau :has() dinilai?
- Ketiganya menyumbangkan spesifisitas dari argumen paling spesifik di dalamnya, sesuai spesifikasi CSS, sementara :where() selalu menyumbang nol berapa pun isinya.
- Apakah inline style atau !important memengaruhi skor ini?
- Tidak. Alat ini hanya menilai selektor. Atribut inline style dan !important sama-sama mengesampingkan spesifisitas normal sepenuhnya, bukan menambah hitungan A-B-C.