Open Bug 977098 Opened 10 years ago Updated 20 days ago

Show CSS Specificity somewhere around selectors


(DevTools :: Inspector: Rules, enhancement, P2)



(Not tracked)


(Reporter: bgrins, Unassigned)



(Keywords: DevAdvocacy)

CSS specificity can be tricky to figure out and debug, but there is a formula that can be followed for calculating it:

It could be useful if we could help people figure out 'why' one selector shows up above the other, either by showing the final calculation or a more in depth visualization of how it was calculated.

If just showing the final calculation, maybe it could be a 'title' attribute on the selector text that shows up when hovering in the style inspector.  Or if showing more information, then maybe a tooltip.  Or, it could be some sort of marker text that shows up in the style editor next to a selector.
Awesome idea. Would certainly help a lot both in the rule-view and style-editor.
Somehow, I prefer the tooltip idea cause it would give us the needed room to show the details of the calculation.
Priority: -- → P2
Component: Developer Tools: Inspector → Developer Tools: CSS Rules Inspector
This came up again as a comment at

> The specificity of rules always bugs me. It would really help if the dev tools 
> would show the computed specificity of a rule somewhere… Some time ago I 
> googled for it, I did not find any tool (with any browser) which lets 
> me know this rule is 0,1,2,2 but that is 0,2,0,0 So in the end you need to 
> “compute” it yourself, which is hard because as a novice you don’t 
> know the whole spec.

and there is also a link to

I think the Ruler View ( should show the calculated specificity of each rule, and also maybe a link to MDN (a polished where specificity is explained. 

This would be helpful for many people, especially beginners to medium experts. No other browser has this, it could set Firefox dev tools really apart.
I found this visual calculator:
I like it. Something like this could fit nicely in a tooltip that appears on hover of css selectors.
Severity: normal → enhancement
Product: Firefox → DevTools
Severity: normal → S3

Since the last update, Chrome and Safari implemented this when you hover a selector.

You need to log in before you can comment on or make changes to this bug.