Specificity Calculator

A visual way to understand CSS specificity. Change the selectors or paste in your own.

ul#nav li.active a

0 1 1 3

Inline styles IDs Classes, attributes and pseudo-classes Elements and pseudo-elements

Specificity Calculator was built by Keegan Street. The specificity calculator JavaScript module is available on GitHub or via npm install specificity.

Specificity Calculator is built for CSS Selectors Level 3.

Specificity Calculator isn’t a CSS validator. If you enter invalid selectors it will return incorrect results. For example, the negation pseudo-class may only take a simple selector as an argument. Using a pseudo-element or combinator as an argument for :not() is invalid CSS3 so Specificity Calculator will return incorrect results.

Specificity Calculator doesn’t support CSS character escape sequences.

Care has been taken to ensure results are accurate. If you find a defect, please report it.