CSS Specificity Calculator

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.

Enable JavaScript to use these tools.