CSS Specificity Calculator
Enter any CSS selector to instantly calculate its specificity score and understand why it wins.
How to use the Specificity Calculator?
- Type or paste your CSS selector into the input field (e.g., #header .nav ul li).
- The tool instantly parses the selector and calculates its specificity score (A, B, C).
- Read the breakdown below to see exactly which parts contributed to the score.
- Use this to debug stylesheet conflicts and avoid using
!important.
Frequently Asked Questions (FAQ)
What do A, B, and C mean?
A is the number of IDs, B is the number of classes/attributes/pseudo-classes, and C is the number of elements/pseudo-elements.
Does it handle :is() or :where()?
Yes. The calculator correctly evaluates :is() and :has() by their contents, and correctly gives :where() a score of zero.
About the CSS Specificity Calculator
The CSS Specificity Calculator by Grab-Kit is a free online tool designed for frontend developers. CSS specificity is the set of rules browsers use to decide which CSS property values are applied to an element. When multiple rules target the same element, the rule with the highest specificity wins. Understanding these rules is crucial for avoiding !important declarations and writing clean, maintainable stylesheets. However, calculating specificity manually for complex selectors like #header .nav ul li a:hover is mentally exhausting. Our tool does it instantly.
Using the tool is incredibly straightforward. Type or paste your CSS selector into the input field above. The tool instantly parses the selector and calculates its specificity score using the standard (A, B, C) tuple format. It counts IDs (A), classes/attributes/pseudo-classes (B), and elements/pseudo-elements (C). Below the score, a clear breakdown explains exactly which parts of your selector contributed to the total, making it the perfect utility for debugging stylesheet conflicts and learning CSS architecture.
Why use Grab-Kit?
All our tools run entirely in your browser using native JavaScript. This means your selectors are analyzed instantly without any server-side delays. It is completely free, requires no signup, and works flawlessly on both desktop and mobile devices, making it the perfect companion for your frontend development workflow.