No Login Data Private Local Save

Visual CSS Specificity Calculator - Online (0,0,1) Style

Developer Tools Educational calculator CSS specificity visual
45
0
0
0

Visual CSS Specificity Calculator

Instantly calculate and compare CSS selector specificity. See exact (0,0,1,0) scores and understand which rule wins.

Selector Specificity
Quick fill:
Compare Selectors

Frequently Asked Questions

Specificity is the browser’s algorithm to decide which CSS rule applies when multiple rules target the same element. It is usually expressed as a four-part number (a,b,c,d): inline styles (a), IDs (b), classes/attributes/pseudo-classes (c), and element types/pseudo-elements (d). Higher numbers mean higher priority.

The value (0,1,2,3) means 0 inline, 1 ID, 2 classes/attributes/pseudo-classes, and 3 type/pseudo-element selectors. Compare from left to right: the first larger number wins. This tool shows both the breakdown and the total textual representation.

Yes, pseudo-elements (like ::before, ::after, :first-line) count as type selectors (position d). Pseudo‑classes (like :hover, :nth-child()) count as class‑level selectors (position c).

:not() and :is() contribute the specificity of their most specific argument. This tool gives them a single class‑level weight for simplicity — good enough for most everyday selectors. :where() adds zero specificity.

!important overrides normal specificity. Inline styles have the highest specificity (a=1,0,0,0) unless !important is used. This calculator focuses on selector-based specificity only.

A comma-separated group (e.g., .class, #id) contains independent selectors. Each has its own specificity — they aren’t combined. Enter one selector chain at a time to get a meaningful result.
🔧 Related Tools