Is CSS Specificity Calculator free?

Yes, CSS Specificity Calculator is completely free to use with no signup required.

Does CSS Specificity Calculator send my data to a server?

No. CSS Specificity Calculator runs entirely in your browser using client-side JavaScript. Your data never leaves your device.

Calculate CSS specificity score (A, B, C) for your selectors. Analyze IDs, classes, attributes, elements, and pseudo-selectors client-side.

CSS Specificity Score breakdown: Represented as (A, B, C).

A (IDs): e.g., #header (+1,0,0)
B (Classes, Attributes, Pseudo-classes): e.g., .btn, [type="text"], :hover (+0,1,0)
C (Elements, Pseudo-elements): e.g., div, ::before (+0,0,1)
Combinators (>, +, ~) and universal selector (*) have no effect.

Selectors List (one per line)

Sorted Specificity List

#header .navigation .menu-item:hover(1, 3, 0)

body #main-content p.intro(1, 1, 2)

div#app :not(span)(1, 0, 2)

.container [type="checkbox"]:checked::after(0, 3, 1)

nav.navigation > ul > li a(0, 1, 4)

:where(.ignored-class) .active(0, 1, 0)

Selector Breakdown

Target Selector

IDs (A)

Classes & Attributes (B)

Elements (C)

IDs

#header

Classes

.navigation.menu-item

Attributes

none

Pseudo-Classes

:hover

Elements

none

Pseudo-Elements

none

6 linesHighest Specificity: (1, 3, 0)