CSS Specificity Calculator
Calculate CSS selector specificity
CSS selectors (one per line)
Include or omit the curly braces { } — only the selector matters.
How specificity works
- 🔴 a — ID selectors (#id): highest weight
- 🟡 b — Class selectors (.class), attribute selectors ([type]), pseudo-classes (:hover)
- 🔵 c — Type selectors (div, p) and pseudo-elements (::before)
- ⚪ Universal selector (*) and combinators add no specificity
- :where() has 0 specificity; :is() and :not() take the specificity of their most specific argument
- Inline styles outrank any selector; !important overrides all
Frequently asked questions
What does CSS Specificity Calculator do?
Calculate CSS selector specificity
What should I check in the result?
Test a small known example and an invalid input. Review generated code or decoded data before using it in a project; inspection alone does not establish correctness or authenticity.