Currently when one hovers over a selector in a CSS file it gives a preview of what it selects. This is useful for beginners or if you just forget what a particular selector does.

What would make this even more useful is to also include the specificity of the selector in the preview popup. Many beginners/intermediate don't understand specificity, which is why you often see super specific selectors all over. Even for experts, it would be quicker than calculating yourself for longer selectors.

Example:

-----------------------------
<select>
…
<option :checked>
Specificity: 0,1,2
-----------------------------
select option:checked

Note: I used how CSS2.1 defines specificity. CSS3 Selectors defines it as 012, which I think is confusing as it makes it look like if there were 10 classes or pseudo classes it would be 102 rather than 0102. CSS 4 Selectors shows it as a=0 b=1 c=2.

Code already exists to calculate specificity in JS if you want to add using 3rd party code https://github.com/keeganstreet/specificity