CSS Selector Specificity Calculator
Instantly calculate the specificity (A-B-C) of any CSS selector
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
Enter a CSS selector and this tool automatically breaks it down into ID count (A), class/attribute/pseudo-class count (B), and tag/pseudo-element count (C) to show its specificity score. It's handy for front-end developers debugging why a style isn't applying or which rule wins, and everything runs locally in your browser with nothing sent to a server.
How to use
- Type the CSS selector you want to analyze into the input field (e.g. div.content > p::first-line)
- Check the automatically calculated A (IDs), B (classes/attributes/pseudo-classes), and C (tags/pseudo-elements) values
- Review the final specificity score in A-B-C format
- Scroll through the extracted components list to see exactly how each part of the selector was counted
FAQ
- How is the specificity score compared between selectors?
- It's compared column by column: A first, then B, then C. A higher A always wins regardless of B or C, and so on.
- Does it handle :not(), :is(), and :has()?
- Yes, these functional pseudo-classes are calculated using the highest-specificity selector found inside their parentheses. :where() is an exception and contributes zero specificity.
- Is my selector sent to a server?
- No, all parsing and calculation happens locally in JavaScript in your browser — nothing is transmitted anywhere.