CSS specificity calculator

Enter CSS selectors (one per line) to calculate their (a, b, c) specificity scores, sorted highest to lowest.

#nav .item:hover(1, 2, 0)score: 120

1 ID selector (#nav) · 1 pseudo-class (:hover) · 1 class selector (.item)

#main(1, 0, 0)score: 100

1 ID selector (#main)

.card .title(0, 2, 0)score: 20

2 class selectors (.card, .title)

div.container > p(0, 1, 2)score: 12

1 class selector (.container) · 2 type selectors (div, p)

a:link(0, 1, 1)score: 11

1 pseudo-class (:link) · 1 type selector (a)

h1(0, 0, 1)score: 1

1 type selector (h1)

*(0, 0, 0)score: 0

Universal selector (*) or combinators only - specificity (0, 0, 0)

A= ID selectors (#id) · B= classes (.class), attributes ([attr]), pseudo-classes (:hover) · C = type selectors (div), pseudo-elements (::before)