Free Developer Tool
CSS Specificity Calculator
Calculate and compare CSS selector specificity to determine which rule takes precedence.
Specificity
0, 3, 0
IDs0
Classes, attributes & pseudo-classes3
Elements & pseudo-elements0
Total specificity3
Specificity order: IDs → classes, attributes and pseudo-classes → elements and pseudo-elements.
What is CSS Specificity Calculator?
Calculate CSS selector specificity and understand which selectors have higher priority when multiple CSS rules target the same element.
How to use
- Enter one or more CSS selectors.
- Calculate the specificity of each selector.
- Compare the specificity scores.
- Use the results to determine selector precedence.
Features
- CSS specificity calculation
- Selector comparison
- Specificity score breakdown
- ID, class and element counting
- Browser processing
Common Use Cases
- Debugging CSS conflicts
- Understanding cascade behavior
- Comparing selectors
- Refactoring CSS
- Frontend development
Example
Input
#header .nav li.active
Output
Specificity: 1,2,1 ID: 1 Classes, attributes and pseudo-classes: 2 Elements and pseudo-elements: 1
FAQ
What does CSS specificity determine?
CSS specificity determines the priority of selectors when multiple CSS rules apply to the same element.
What is a specificity score?
A specificity score represents the number of IDs, classes, attributes, pseudo-classes, elements and pseudo-elements contained in a selector.
Does the calculator modify CSS?
No. It only analyzes the selectors and calculates their specificity.
Missing a feature?
If this tool doesn't cover your use case or is missing functionality, please let me know through the Contact page.
New improvements and features are added based on user feedback.