See exact CSS specificity in Chrome Dev Tools?

Question

I know that in Chrome Dev Tools, for a selected HTML element, applicable CSS selectors are listen in order of specificity in the Styles tab.

But is it possible to see the exact exact CSS specificity value of each rule on the selected element?

EDIT: One answer says that I can see the CSS specificity value in the computed tab, but I don't see it there. See screenshot below. Maybe I need to clarify that when I am asking to see the CSS specificity value I am looking for a number like 0010 for a class selector or 0001 for an element selector.

Towne

Yes in computed side – Supramolecular

Something like this mockup would be really useful – Asaph

Hover over the CSS selector in Dev Tools to see 3-digit format specificity. See Chrome docs: developer.chrome.com/blog/new-in-devtools-115/#specificity – Fatten

Answer 1

Chrome dev tools sorts classes by their specificity from top-to-bottom.

Check this out:

Inspect an element (in this case an svg) and type in the css attribute you want to see the specificity for (this case "height').

Highest is always on top!

Whereat

This does not show the Specificity values directly in Chrome tools - or am I missing something? – Asaph

I don't see there the specificity values in format 0-0-1 for example. The original question says "is it possible to see the exact exact CSS specificity value of each rule on the selected element?" – Goa

Answer 2

Safari's Developer Tools (as of 16.3.1 in 2023-03)

1. Inspect an element in the Elements panel.
2. In the CSS class pane: Hover over a selector.
3. It shows you a tooltip Specificity: (X, Y, Z).
   • What the 3 positional parameter stand for I don't know. Info on that appreciated!

Siloam

The 3 params would be ID specificity, Class/pseudo-class/attribute specificity, and Element specificity: <css-tricks.com/specifics-on-css-specificity>. "CSS specificity is base infinity" – Tavy

Answer 3

Hover your mouse over the CSS selector in Chrome Dev Tools, and it will show a tooltip with the specificity values.

See this in the Chrome docs here: https://developer.chrome.com/blog/new-in-devtools-115/#specificity

The 3 numbers correspond to "ID," "class," and "type" specificity. So e.g. the middle column is the specificity value from classes.

ID is worth 100, classes are worth 10, and types are worth 1, so actual value from the Dev tools 3 numbers would be:

(first number * 100) + (10 * second number) + third number

See docs on the values of the 3 numbers: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#how_is_specificity_calculated

See docs from W3 on calculating specificity: https://www.w3schools.com/css/css_specificity.asp

Fatten

a class is not 10 and an ID is not 100. I.E. you can have 11 or more classes (would be worth 110) and it won't override an ID (would be worth 100) because IDs are simply more specific than (any number of) classes. they are counted separately. better to think of them as separate numbers and write it like (0,11,0) or 0-11-0 for eleven classes and (1,0,0) or 1-0-0 for a single ID – Potsdam

Answer 4

The chrome extension "CSS Dig" offers a solution to the finding the values of specificity in chrome in 0,0,0 format

The extension works and does the job but has a few bugs

Link : https://chrome.google.com/webstore/detail/css-dig/lpnhmlhomomelfkcjnkcacofhmggjmco?utm_source=chrome-ntp-icon

Supposal

The reviews on that extension are almost universally poor, date from at least 2019 and most seem to say it does not work. I am not encouraged to try it and am looking elsewhere. – Assiduity

Answer 5

• Right click on the element you need to see styles for;
• Choose Inspect;
• The console will open. On the right side of it you'll see Styles tab (it'll be open by default);
• Switch to Computed tab (to the right from Styles);

On this tab you'll see all CSS styles with it's values applied to the element.

UPDATE

Looks like I misunderstood the actual question, sorry.

It seems that there's no such thing in Chrome Dev Tools. Check out this issue.

As it stands, simply displaying a number isn't as useful as it may seem to the majority of users. We are interested in exploring other patterns to explain overridden values.

Vibrations

I can't find what I am looking for there. See my edit. – Towne

@Towne Try checking the Show all checkbox, it'll show all styles, even on browser level. Also, there's a Filter field (on the same line with Show all), it's clickable and you can type the value you are looking for, like 0010 or 0001. – Vibrations

This does not show the specificity score. @Vibrations I think you misunderstand the question. – Adulteress

@Adulteress yes, you're right, my bad. I've updated my answer, looks like there's no such thing in Chrome Dev Tools. – Vibrations