How to view browser's calculated CSS specificity?

Question

Greetings: I have spent days trying to find a tool that would display the exact CSS specificity number for each CSS rule as calculated by the browser. I have already looked at many online resources including Tools to see CSS specificity - the links there talk about the overridden classes etc. but I want to see the exact specificity number calculated and used by the browser when applying specific CSS rules.

Why Do I Need To See Exact CSS Specificity Calculation?
I cannot overcome a certain issue where browser is using a CSS rules based on that rule's proximity to the element but I have another rule defined before it that should have a higher specificity then the rule that gets applied by the browser. I do not have a simple code that I can use to demonstrate using jsfiddle and the code I am trying to debug is too complex to include in the fiddle.

Almost every search has resulted in people pointing to some kind of "CSS specificity rules" or "understanding CSS specificity" links. I understand how CSS specificity is supposed to work, use Firebug and Chrome developer tools extensively, and well aware of links that point to understanding specificity rules. My quest is to try and peek into what browser engine thinking when applying one CSS rule over another! And since it has already calculated this info to decide which rule overrides other rules, somehow it should be accessible info, but I don't know how?

A very base example of the problem I am facing:

.testClass1 .title, .testClass2 .testClass1 .title { corresponding CSS styles }
.testClass2 .title, .testClass1 .testClass2 .title { corresponding CSS styles }

Or it could be coded something like this.... (doesn't make any different in the final outcome.)

.testClass1 .title { corresponding CSS styles }     --- call it Rule 1
.testClass2 .testClass1 .title { corresponding CSS styles } --- call it Rule 2
.testClass2 .title { corresponding CSS styles }  --- call it Rule 3
.testClass1 .testClass2 .title { corresponding CSS styles }  --- call it Rule 4

And the HTML structure looks something like this...

<!-- delivers intended results -->
<div class="testClass1">
   <div class="title">Some Title</div>
</div>

<!-- Does not deliver intended results. 
  - I expected Rule 1 or Rule 2 to take effect, but Rule 3 gets
    applied because of its proximity to the actual HTML element. 
    i.e. rule 3 is defined later in CSS then rule 1 and 2. -->
<div class="testClass2">
  <div class="testClass1">
    <div class="title">Some Title</div>
  </div>
</div>

I thought best way to debug this issue would be to see what was browser's CSS specificity calculation instead of me having to assume certain rules and manually calculate it each time. Also, browser has already calculated this while applying it, so I was looking for tools to peek into browser calculation of these specificity rules but cannot find any way of doing it in Firebug or Chrome inspector.

Does anyone else out there know about this and can anyone point me to a tool that might exist? I greatly appreciate your help. Thank you!

EDIT: I tried to put together a fiddle to see if I can reproduce "something like what I am struggling with" to demonstrate. I guess, I am in luck - please see http://jsfiddle.net/smallworld/abvHC/1/. The problem in this fiddle is still too simple, but kind of representative of my challenge where classes are assigned dynamically so I have no way of predicting the exact order. The example 3 in the fiddle is somewhat of a representative case of why I needed to see the calculated specificity. In any case, I think it would be wonderful to be able to compare your calculated number with browser's calculation.

ANOTHER EDIT: While I still do not have answer to my quest for a peek into browser's specificity score for a given element, I think Faust and others have led me to a possible solution to the original problem I was facing. Please see comments thread below. Considering that question is about being able to view browser's specificity score, I might as well leave this question open - very likely answer is going to be that currently there are no tools available to be able to do so.

Britneybritni

The developer tools show all of that information (except the actual numbers) – Expediential

Why not calculate it yourself? Your specificities are 0,2,0, 0,3,0, 0,2,0, and 0,3,0 appropriately... They're not hard to calculate, and browsers do not calculate them any differently than any other browser. Rule 2 is more specific than Rule 3 and will always trump it. If you're seeing unexpected results, then you have other styles or typos somewhere. I guarantee the browser is not applying CSS based on "proximity." Try checking the Chrome Developer Tools to see which CSS selectors are matching your element and make sure your CSS is valid. – Io

SLaks - that exact number is what I am looking for because my understanding and browser's interpretation doesn't seem to agree so I want to understand what it is that I am missing... – Britneybritni

animuson - thank you for your note. I totally agree with your calculations and that's what I expected. My example above is way too simple, the actual problem I am trying to debug is far too complex, hence my quest to find a tool that would show me browser's calculation - something that I can compare with mine. – Britneybritni

@animuson: there are differences between browsers in how thy calculate specificity for selectors with large numbers of elements. See https://mcmap.net/q/81290/-how-are-the-points-in-css-specificity-calculated – Collaboration

@Faust: Not really something to be worried about, though. If you're using that many tag-names or classes in a single selector, specificity is the least of your worries. – Io

@Faust: thank you for pointing me to that wonderful resource. Though my needs are no where as complex, it is definitely more complex than one I outlined above. Please see my edit above. – Britneybritni

@animuson: I agree that if my structure was as complex then likely I have other problems to worry about. My quest is... irrespective of complexity of the nesting structure, I want to be able to see browser's calculation so I can compare it with my calculation. – Britneybritni

I know this doesn't answer your questions, but in your fiddle, your 3rd (out of 5) case matches the 3-clasname selector in each of your style rules. Therefore the specificity of each is 0.3.0 and the 2nd rule wins out via cascade. You can see this by reversing the order of the style rules in your CSS. -- the 3rd line becomes green. – Collaboration

@Faust: Ahhha! I see your point as it leads me somewhere! I tried another variation (jsfiddle.net/smallworld/abvHC/2) - it seems to produce intended results in my simple example. As explained earlier, my real life scenario has 8 to 10 levels deep nesting with dynamically assigned classes so I probably have no other choice but build a complex beast of a CSS to handle various scenarios?? Or go back to the drawing board and say "Forget about dynamic class assignment?" I still feel that it would be very helpful to be able to see browser's specificity score in many other cases. – Britneybritni

If I understand what your expectations are for the functionality of your code, it looks to me like you want the innermost parent class to control the display of .title regardless of grandparent and later ancestor classes. If so, you can simplify the code greatly by just expressing a direct child relationship .testClass1 > .title, see jsfiddle.net/abvHC/3. If I've misinterpreted and you expect later ancestors to affect the display in some way, then it could get tricky with the interactions of dynamic classes and css cascading order. – Kaduna

Did you try the Computed CSS panel in Chrome Dev tools? When you select an element in the Styles sidebar you can see there is a Computed CSS on top. – Arsenic

@HaralanDobrev Yes I did try that as well. The thing is that it does not show the exact computed score for specificity - something I believe should be visible for debugging purpose. – Britneybritni

@Kaduna yes I understand your point. However, in my case, the actual usecase is far more complex than that. There could be a class assigned 5/6/7 levels above whose CSS rules are winning over the class that was assigned at 2/3 levels above current element. So in this case, I am not able to use child selectors as indicated by you. – Britneybritni

@smallworld: What is (or what do you want) determining what class wins? – Kaduna

@Kaduna I updated jsFiddle further to try and explain the problem I am trying to solve. I think I kind of have figured out what I need to do, but I sincerely appreciate all the help from this wonderful community so hoping that our discussion thread here might come handy to someone else in the future. Do read HTML comments as I try to explain things there. jsfiddle.net/smallworld/abvHC/5 – Britneybritni

You still need to build a better test case, as my direct child solution still solves your latest example configuration. When do you not expect the innermost class to control the style of the element? And in that circumstance, what do you expect to control it? – Kaduna

Answer 1

Before Firefox switched to WebExtensions, there was a getSpecificity() function available in the inIDOMUtils API in Firefox.

To use this API you had to write your own Firefox extension, though.

The Firefox DevTools obviously already use an internal API for that but the info doesn't seem to be displayed anywhere yet. Therefore there is a feature request to show it somewhere.

Unfortunately, there is also no WebExtension API that exposes this info to extensions.

Underpants

Sebastian, I did look at the Firebug link you provided before posting this question - didn't think there was anything happening on that front. Also, I framed my question with specifics after seeing how it seemed to confused everyone on the firebug thread in your answer. However, I think your first link to getSpecificity() provides a good answer that there is some movement in that direction, but no extension yet! Thank you for finding and sharing that information. I will accept this as an answer. – Britneybritni

The link to the issue in Google's Code Archive, which you call 'implements this', is dead. – Fireback

Firebug is discontinued now. So I've updated my answer accordingly. Thank you for the hint! – Underpants

@SebastianZartner the first two links are dead. Anyway, is it difficult to write an extension to expose this function in Dev Tools somehow? – Socio

Thank you for pointing out the broken links! I've updated my answer now to reflect the current situation. Firefox switched to the WebExtensions framework some years ago, which doesn't seem to provide an API for this, unfortunately. You might want to provide a patch for the feature request linked in the answer, though. That would benefit everyone using the DevTools. – Underpants

Answer 2

I've been using Firebug addon in Firefox. So far that works for me.

Transliterate

That does not (to my knowledge) show the "calculated specificity" on the selector. All it shows is the selector that is applied. The question relates to seeing an actual computed value that is being calculated by the browser for the selector. – Kaduna

Right, Firebug doesn't show this value yet. Though there's an issue covering that. – Underpants