CSS Specificity Calculator

Calculate and compare the specificity score of any CSS selector visually.

CSS SelectorsOne per line, or comma-separated

Specificity Rules

a — ID Selectors

#main#header#nav

100 per ID

b — Classes, Attributes, Pseudo-classes

.btn[href]:hover:nth-child(2)

10 per selector

c — Types & Pseudo-elements

divh1::before::after

1 per selector

The universal selector (*), combinators (>, +, ~, ), and the :not() pseudo-class itself have no specificity. The contents inside :not() are counted normally. !important overrides all specificity.