CSS Specificity Calculator
Analyze and debug complex CSS selectors instantly. Understand which styles win the priority battle in your stylesheet.
📝 Input Your Code
Paste raw CSS, selectors, or full HTML code with <style> blocks.
📊 Results
📖 What is Specificity?
CSS Specificity is the score that determines which style declaration is applied by the browser.
When multiple CSS rules target the same element, the browser uses an algorithm to calculate their weight. The rule with the highest weight wins. This tool automates that calculation for you, helping you debug “stuck” styles and avoid unnecessary use of !important.
Calculations follow the standard 3-column tuple: (IDs, Classes/Attributes, Elements). A higher value in the leftmost column always beats any combination in columns to its right.
🛠️ How to Use
- 1
Insert Your Code
Paste your selectors or entire CSS files into the text area. You can also drag and drop a .css or .html file directly.
- 2
Run Analysis
Click “Analyze Specificity”. The tool will parse every selector and compute its weight based on W3C standards.
- 3
Debug and Optimize
Examine the results to see which selector has the highest score. Use this info to flatten your CSS hierarchy.
📋 Quick Reference
| Selector | IDs | Classes | Elements | Score |
|---|---|---|---|---|
| * | 0 | 0 | 0 | (0,0,0) |
| p | 0 | 0 | 1 | (0,0,1) |
| .active | 0 | 1 | 0 | (0,1,0) |
| #nav .item | 1 | 1 | 0 | (1,1,0) |
| ul > li.link:hover | 0 | 2 | 2 | (0,2,2) |
❓ Common Questions
Technically, no. !important doesn’t change the specificity score, but it forces the browser to prioritize that declaration above any others, regardless of their specificity. It’s often considered a “last resort” in CSS.
Pseudo-classes themselves count as a class (0,1,0), but functional ones like :is(), :not(), and :has() take the specificity of their most specific argument.