CSS Specificity Calculator
CSS selectors
Summary
Selectors
0
Strongest
0-0-0
Status
Idle
Specificity is shown as A-B-C: IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements.
Specificity results
Analyze selectors to see specificity scores.
About CSS Specificity Calculator
CSS specificity decides which selector wins when multiple rules target the same element. This calculator shows the A-B-C score for each selector.
It counts IDs, classes, attributes, pseudo-classes, elements, and pseudo-elements, including common selector functions such as :is(), :not(), :has(), and :where().
How to use this tool
- Paste one selector per line, a comma-separated selector list, or full CSS rules.
- Click Analyze to calculate specificity for each selector.
- Compare the A-B-C scores and review which selector is strongest.
Tips
- Avoid unnecessary IDs when you want CSS that is easy to override.
- :where() always has zero specificity, which is useful for low-priority defaults.
- When selectors have equal specificity, the later matching CSS rule usually wins.
Related tools
You may also find these tools useful.
CSS Minifier / Beautifier
Minify CSS to reduce file size or beautify compressed CSS for easier reading.
Developer Misc
›
CSS Clamp Generator
Generate responsive CSS clamp() values for fluid typography, spacing, gaps, and layout sizing.
Developer Misc
›
CSS Grid Generator
Build CSS Grid layouts with columns, rows, gaps, alignment, live preview, and copy-ready CSS.
Developer Misc
›
CSS Flexbox Generator
Create CSS flexbox layouts with live preview, alignment controls, wrapping, direction, gap, and ready-to-copy CSS.
Developer Misc
›
CSS Unit Converter
Convert CSS units such as px, rem, em, %, vw, and vh with base font size, parent size, and viewport settings.
Developer Misc
›
CSS specificity FAQ
What does A-B-C mean?
A is ID selectors, B is classes, attributes, and pseudo-classes, and C is element and pseudo-element selectors.
Does inline style count here?
This tool calculates selector specificity. Inline styles are outside selector specificity and are normally stronger than stylesheet selectors.
How does :where() affect specificity?
:where() contributes zero specificity, even when its arguments contain IDs or classes.
Can I paste full CSS rules?
Yes. The tool extracts selectors before opening braces and analyzes them.