Closed Bug 977098 Opened 11 years ago Closed 2 months ago

Show CSS Specificity somewhere around selectors


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



(relnote-firefox 128+, firefox128 fixed)

128 Branch
Tracking Status
relnote-firefox --- 128+
firefox128 --- fixed


(Reporter: bgrins, Assigned: nchevobbe)



(Keywords: DevAdvocacy)


(1 file)

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.

The specificity is included in the selector title so it's shown on hover.

Assignee: nobody → nchevobbe
Pushed by
[devtools] Show selector specificity in Rules view. r=devtools-reviewers,ochameau.
Closed: 2 months ago
Resolution: --- → FIXED
Target Milestone: --- → 128 Branch

Is this something we wanted to add to the Fx128 relnotes?

Flags: needinfo?(nchevobbe)

Release Note Request (optional, but appreciated)
[Why is this notable]:
[Affects Firefox for Android]:
[Suggested wording]:
[Links (documentation, blog post, etc)]:

(In reply to Ryan VanderMeulen [:RyanVM] from comment #11)

Is this something we wanted to add to the Fx128 relnotes?

yes, would be nice

Release Note Request
[Why is this notable]: Exposed CSS rules specificity in the Inspector, which can help web developers understand why a given rules is applied before another. All the other browser's DevTools already exposed it.
[Affects Firefox for Android]: none
[Suggested wording]: CSS rules specificity (see are now displayed in a tooltip when hovering a CSS Rule selector in the Inspector Rules view. This can help web developers understand why a given rules is applied before another.

relnote-firefox: --- → ?
Flags: needinfo?(nchevobbe)

Added to the Fx128 relnotes.

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