CSS specificity calculator

Compare selector specificity as ID, class and type components, with Selectors Level 4 handling for :is(), :not(), :has(), :where() and nth-child of-lists.

01 Input

YOUR INPUT

02 Output

LOCAL RESULT

QUICK GUIDE / 35

How to use

Select Load example to restore the sample, or replace the labeled inputs with your own values.
Review the options and select Run tool. No input is sent to a server.
Selectors are ranked from highest to lowest tuple. :where contributes zero; :is, :not and :has contribute their most specific argument.
Inspect the result, then copy or download it. Clear removes visible inputs and output.

A worked example

Load example restores these values.

CSS selectors (comma-separated or one per line):
#app .item:hover
:where(#app) button
:is(.card, #hero) a

Expected result

#app .item:hover → (1, 2, 0)
:is(.card, #hero) a → (1, 0, 1)
:where(#app) button → (0, 0, 1)

Scope & limitations

Specificity only: excludes origin, !important, cascade layers, inline styles, scope proximity and source order. CSS nesting (&), CSS Modules and unsupported nth syntax are rejected. It does not check whether a selector matches your DOM.

Preparing offline tools…Everything runs on your device.

CSS specificity calculator

01 Input

02 Output

Related tools

Fluid CSS clamp builder

CSS easing curve editor

CSS Grid layout builder