CSS Specificity Calculator

Calculate CSS selector specificity (a, b, c). Compare two selectors. W3C accurate.

Selector 1

Specificity: (1, 1, 1)

a = IDs, b = classes/attributes/pseudo-classes, c = types/pseudo-elements

Selector 2

Specificity: (0, 0, 2)

Selector 1 wins (higher specificity).

As per W3C Selectors Level 3, :not() contributes the specificity of its argument.

Frequently Asked Questions

a = ID selectors, b = classes + attributes + pseudo-classes, c = type selectors + pseudo-elements. :not() uses its argument's specificity.

Compare (a,b,c) left to right. First higher value wins. Tie means source order decides.

Was this helpful?

Check WCAG contrast ratios for accessibility. Real-time preview and pass/fail for AA and AAA.

Convert Tailwind utility classes to equivalent CSS. Debug and understand Tailwind output.

Convert CSS styles to Tailwind utility classes