CSS Specificity Calculator - Free Online Tool | PivaBox

Calculate CSS selector specificity — visual (a, b, c) breakdown with compare mode and selector explanation

How to Use CSS Specificity Calculator

1. Type or paste a CSS selector into the input field — examples include ul li, .class, #id, .class1.class2, or complex selectors like div#id.class
2. View the specificity result displayed as a visual (a, b, c) breakdown — IDs (a), classes/attributes/pseudo-classes (b), and elements/pseudo-elements (c) — with the total specificity value calculated as a*100 + b*10 + c
3. Optionally expand Compare Mode to enter a second selector and see which one would win in the CSS cascade. Check the inline style and !important notes for edge cases.

Frequently Asked Questions

Is CSS Specificity Calculator free?

Yes, PivaBox CSS Specificity Calculator is completely free to use. There are no charges, subscriptions, or hidden fees. All calculation runs locally in your browser.

How is specificity calculated?

Specificity is calculated as a three-component value (a, b, c) where <strong>a</strong> counts ID selectors, <strong>b</strong> counts class selectors, attribute selectors, and pseudo-classes, and <strong>c</strong> counts type selectors and pseudo-elements. The total value is calculated as a*100 + b*10 + c. Higher values win in the cascade.

What about !important and inline styles?

Inline styles (style attribute on an HTML element) always override stylesheet rules regardless of specificity. The !important flag overrides normal specificity rules — an !important rule beats a non-!important rule. When two !important rules conflict, normal specificity determines the winner. The tool includes notes explaining both of these edge cases.