CSS Specificity Calculator
Instantly calculate the A-B-C specificity of any CSS selector
Paste in a CSS selector and this tool breaks it down automatically, counting IDs (A), classes, attributes and pseudo-classes (B), and elements and pseudo-elements (C) to give you a specificity score. It's handy for front-end developers and web designers trying to figure out why a style isn't applying or which rule is winning the cascade. Everything runs right in your browser, so the selectors you enter are never sent to a server.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Type the CSS selector you want to analyze into the input field (for example: div.content > p::first-line)
- Check the automatically calculated A (IDs), B (classes/attributes/pseudo-classes), and C (elements/pseudo-elements) values
- Read the final specificity score in A-B-C format
- Review the list below to see exactly how the selector was broken into individual components
FAQ
- How do I compare specificity scores?
- Compare the columns in order: A, then B, then C. A selector with a higher A always wins; if A ties, B decides, and if B ties too, C decides.
- Are selectors like :not(), :is(), and :has() counted?
- Yes. These functional pseudo-classes take on the specificity of the most specific selector inside their parentheses. The one exception is :where(), which always contributes zero specificity.
- Are the selectors I enter sent to a server?
- No. All calculations run locally in your browser with JavaScript, and nothing is transmitted anywhere.