./prontouso.com

UTILITAS DESAIN

Kalkulator Spesifisitas CSS

Masukkan selector CSS untuk menghitung skor spesifisitas (Inline, ID, Class/Atribut/Pseudo-class, Elemen/Pseudo-elemen) dan bandingkan selector mana yang menang.

Status alatBerjalan di browser Anda
Pratinjau

Input

Hasil

Selektor A
1-1-1
Selektor B (opsional, untuk dibandingkan)
0-1-4

A menang

Cara kerja

  1. Masukkan data Anda

    Isi nilai yang diperlukan, tempel teks Anda, atau unggah file yang ingin diproses.

  2. Lihat hasil seketika

    Sebagian besar alat diperbarui secara langsung saat Anda mengetik; beberapa menggunakan satu tombol tindakan.

  3. Gunakan hasil Anda

    Salin, unduh, atau bagikan hasil yang dihasilkan — Anda selalu memiliki kendali penuh atas data Anda.

Privasi dan pemrosesan data — Berjalan secara lokal di browser Anda. Alat ini tidak mengunggah data Anda.

Apa itu Kalkulator Spesifisitas CSS?

Enter one or two CSS selectors to see their specificity, shown as ids-classes-types, and which one would win a conflict.

PAHAMI CARA KERJA ALAT

How CSS specificity is calculated

How it's calculated

IDs count the most, then classes, attribute selectors, and pseudo-classes, then element type selectors and pseudo-elements. Combinators like space, >, and ~ don't affect specificity.

Limitations

  • `:not()`, `:is()`, and `:has()` are each counted as one pseudo-class rather than looking inside their argument.
  • `:where()` always counts as zero, matching the CSS specification.

Worked example

`#main .container p` scores 1 id, 1 class, 1 type (1-1-1), while `nav ul li.active a` scores 0 ids, 1 class, 4 types (0-1-4) — the first selector wins despite matching fewer elements by name.

Specificity example

Weight
IDs - classes/attributes/pseudo-classes - types/pseudo-elements

#app .card button:hover

One ID, two class-level parts, and one type selector gives 1-2-1.

Calculation notes

All calculation runs in your browser; the selectors you enter are never sent anywhere.

Pertanyaan yang Sering Diajukan (FAQ)

Why does a later rule sometimes win even with equal specificity?

When specificity ties, the rule that appears later in the stylesheet (or has higher CSS layer priority) wins.

Does inline style show up here?

No — inline `style` attributes always outrank any selector-based specificity, regardless of what this calculator shows.

Does specificity depend on the order of parts in a selector?

No — only which kinds of selectors appear and how many of each, not the order they're written in.

Does it fully parse :is(), :not(), and :has()?

No. This implementation counts each as one pseudo-class, except :where(), which contributes zero. The full CSS spec looks inside those arguments.

Alat Terkait