CSS Specificity Visualizer

Parse any CSS selector and render its specificity score as stacked bars — compare multiple selectors.

Selectors to compare

Specificity breakdown

IDs classes, attrs, pseudo-classes elements, pseudo-elements

Tip: Specificity is calculated as (IDs, classes/attributes/pseudo-classes, elements/pseudo-elements) and compared left to right — a single ID always beats any number of classes. Inline styles and !important aren't shown here since they override specificity entirely.