Ever wondered why one CSS rule is overriding another? The answer is usually specificity. This calculator helps you demystify the CSS cascade by calculating the specificity of any selector you enter. It breaks down the selector into its components (IDs, classes, elements) and gives you the standard specificity value. This tool is indispensable for developers who are trying to debug complex stylesheets and understand exactly which styles will be applied by the browser.
⚖️CSS Specificity Calculator
Frequently Asked Questions
How is specificity calculated?
Specificity is a weight that is applied to a given CSS declaration. It is calculated by counting the number of ID selectors (a), class selectors/attributes/pseudo-classes (b), and element selectors/pseudo-elements (c). A selector with a higher specificity value will win out over one with a lower value.
Does this calculator handle the `:not()` pseudo-class?
This is a simplified calculator and does not parse the contents of functional pseudo-classes like `:not()`. It counts `:not` itself as one pseudo-class, but doesn't analyze the selector inside it, which is how specificity for `:not` is actually calculated.
