CSS Specificity Calculator

Paste a CSS selector to see its specificity broken down by IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements.

CSS selector

IDs

Classes / attrs / pseudo-classes

Elements / pseudo-elements

(1, 3, 4)

Relative weight for comparison: 1,003,004

Specificity is compared category by category, left to right (IDs first, then classes, then elements) — a single ID always outweighs any number of classes, regardless of the numeric "weight" shown above, which is just a convenient way to sort/compare selectors on this page.

Example input

#nav ul li.active > a:hover

Example output

(1, 2, 2)