Menu
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.
514
Memorize how to calculate specificity! Start at 0, add 100 for each ID value, add 10 for each class value (or pseudo-class or attribute selector), add 1 for each element selector or pseudo-element. Note: Inline style gets a specificity value of 1000, and is always given the highest priority!
On Chrome's Developer Tools tab (CTRL + SHIFT + I), go to Resources (you may have to enable Resource tracking on that page), and click on the sub-tab Stylesheets. That will show all css files loaded by that page.
You can find it by just clicking Show Inherited check box on Chrome's computed style panel likes below.
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
114
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
