Kalkulator Spesifisitas CSS
Hitung spesifisitas CSS dari satu atau lebih pemilih sebagai tupel (A, B, C) — hitungan ID, class/attribute/pseudo-class, dan type/pseudo-element — untuk debug mengapa aturan gaya tidak menang.
Input
Output
| Pemilih | ID | Class | Tipe | Spesifisitas |
|---|---|---|---|---|
| No data yet | ||||
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-specificity-calculator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"selectors": "#header"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-specificity-calculator` tool (CSS Specificity Calculator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-specificity-calculator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Kalkulator Spesifisitas CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Apa itu spesifisitas CSS?
Ketika dua aturan CSS menargetkan elemen yang sama dan menetapkan properti yang sama, browser memerlukan tiebreaker untuk memutuskan mana yang menang. Tiebreaker tersebut adalah spesifisitas — skor yang dihitung dari pemilih itu sendiri, bukan dari mana aturan muncul di stylesheet (itu hanya penting sebagai tiebreaker akhir, ketika spesifisitas sama). Pemilih yang lebih spesifik selalu mengalahkan yang kurang spesifik, terlepas dari aturan mana yang ditulis terakhir.
Sistem (A, B, C)
Spesifisitas dinyatakan sebagai tiga angka, dibandingkan dari kiri ke kanan seperti nomor versi — perbedaan apa pun di A mengungguli perbedaan apa pun di B, yang mengungguli perbedaan apa pun di C:
- A — Pemilih ID. Setiap
#iddalam pemilih menambahkan satu. - B — classes, attributes, dan pseudo-classes. Setiap
.class,[attr], atau pseudo-class gaya:hovermenambahkan satu. - C — types dan pseudo-elements. Setiap nama tag (
div,a) dan setiap pseudo-element (::before,::after, dan bentuk single-colon legacy:before/:after/:first-line/:first-letter) menambahkan satu.
Pemilih universal (*) dan combinator ( , >, +, ~) selalu berkontribusi nol — mereka mempersempit apa yang cocok, bukan seberapa spesifik kecocokannya. Jadi #header mendapat skor (1, 0, 0), .nav a:hover mendapat skor (0, 2, 1) (dua pemilih class-ish, satu type), dan .btn.btn-primary — dua classes pada elemen yang sama — mendapat skor (0, 2, 0), mengalahkan aturan single-class meskipun itu adalah jenis pemilih yang "sama".
Jebakan :not() / :is() / :has()
CSS modern menghitung :not(), :is(), dan :has() berdasarkan spesifisitas dari argumen mereka yang paling spesifik, bukan sebagai pseudo-class yang rata. Kalkulator ini menggunakan perkiraan yang lebih sederhana, pre-Selectors-4 sebagai gantinya: setiap ini (dan pseudo-class fungsional lainnya, seperti :nth-child()) dihitung sebagai single pseudo-class — +1 datar ke B, terlepas dari apa yang ada di dalam tanda kurung. Ini adalah pemotongan lingkup yang didokumentasikan, bukan bug: ini membuat parser tetap sederhana dan akurat untuk kasus umum (argumen tunggal, tidak bersarang), tetapi akan mengundercounting :not() yang membungkus sesuatu dengan ID di dalamnya. :where() selalu mendapat skor nol, per spec, terlepas dari isinya.
Cara menggunakannya
Tempel satu pemilih CSS per baris — sesederhana .btn atau sebrumit #main .content > p::before:hover. Setiap baris mendapatkan baris sendiri dengan hitungan ID, class, dan type ditambah skor (A, B, C) gabungan. Hasil diperbarui saat Anda mengetik.
FAQ
Mengapa div > p::before mengalahkan #main... atau tidak? Tidak — ID (A) selalu mengungguli sejumlah type selector atau pseudo-element (C), menurut definisi bagaimana ketiga angka dibandingkan.
Apakah urutan aturan penting jika spesifisitas sama? Ya — ketika dua aturan memiliki spesifisitas identik, aturan yang muncul lebih akhir dalam cascade (atau dimuat lebih akhir) menang. !important mengganti spesifisitas sepenuhnya, dan inline style="" attributes mengungguli aturan berbasis pemilih apa pun.
Apakah ini menangani daftar pemilih seperti .a, .b? Perlakukan setiap grup yang dipisahkan koma sebagai baris tersendiri untuk breakdown per-selector — daftar pemilih menerapkan aturannya ke setiap pemilih secara independen, dan masing-masing dapat memiliki spesifisitas yang berbeda.
Privasi
Parsing dan scoring terjadi sepenuhnya di browser Anda. Pemilih yang Anda tempel tidak pernah diunggah atau disimpan.