Developer Utility
CSS Specificity Conflict Graph Tool
Analyze CSS selector specificity and property-level override conflicts.
Language: CSSUtility: InspectUtility: Compare
Parsed selectors: 4 Properties with conflicts: 1 Selector Specificity: - [1,1,0] #cta.button (rule #3) - [0,2,0] .button.primary (rule #2) - [0,1,1] section .button (rule #4) - [0,1,0] .button (rule #1) Conflict Graph (property -> competing selectors): - color -> [1,1,0] #cta.button (rule #3) -> [0,2,0] .button.primary (rule #2) -> [0,1,1] section .button (rule #4) -> [0,1,0] .button (rule #1) Notes: - This analysis is best-effort and may miss nested at-rule edge cases. - In equal specificity ties, later source order typically wins.
What This Tool Does
Inspect selector specificity and identify property override hotspots that cause inconsistent styling.
Use it to inspect or transform input quickly, then carry validated output into code, tests, or API requests.
Common Use Cases
- Find why expected styles are being overridden.
- Review selector competition during design-system cleanup.
- Flag properties with many competing declarations.
Common Pitfalls
- The parser is best-effort and not a full CSS AST.
- Complex nested at-rules may require manual validation.
FAQ
Does this show likely winners?
Yes, conflicts are listed by specificity to indicate probable winners.
Can this replace browser DevTools?
No, use it as a fast triage pass before deep inspection.
Does this tool send data to a backend?
Most tools process input client-side in your browser unless explicitly noted.