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.
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!
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
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.
Related
I'm doing a bit of CSS troubleshooting and, as you can imagine, I'm having a tough time getting a div to style the way I want it too. In Chrome, I've opened the development window and I've selected my element to inspect the style settings.
I need to do a quick visual test of some of my changes from within a specific selector. Note, I'm not looking to declare a temporary, specific value for the element.
I've found the selector, and the respective CSS property and as I knew, it is crossed out because a CSS definition of higher precedence is overriding it. However, for my test I added !important after the property value but it did not update my element and remained crossed out.
We have some very complex CSS. There is a chance that it's somehow being overridden but I wanted to be sure-- in Chrome browser, within the development window, if you override a style specified for an object, adding !important should it work?
Does the Chrome browser development tools respect style changes specifying !important?
Yes it does respect the specificity.
You can however test the specificity of your rule before using it in the devtools (or anyplace for that matter) here
I have a lot of sass for a larger project spread over different files. The compiler then assembles all selectors with the same css and combines them in one css-selector. Seems good and efficient. However, in certain scenarios my css wouldn't work and it seemed to be due to selector size.
I found the following: when I use the 'New Style Rule'-button in Chrome DevTools I can add the following selector, hit tab and insert my css:
a.valign-wrapper:hover i.material-icons,
a.progress-bar:hover i.material-icons,
a.status:hover i.material-icons
However, this second selector doesn't work. When hitting tab it just disappears (without any feedback), seemingly meaning I can't use it.
a.valign-wrapper:hover i.material-icons,
a.progress-bar:hover i.material-icons,
a.status:hover i.material-icons,
.select-wrapper.box a.caret:hover::before i.material-icons
What is the cause of this? And also, would you know of a way to fix this? Since I'm using sass I can't just split the selector onto two lines, since sass will combine them when compiling.
Update:
To clarify the problem and show that it's something with chrome and/or css, here are some steps to reproduce (in Chrome):
Select the first selector from above -> Ctrl+C
Hit RMB -> Inspect on any page (this stackoverflow-page for example)
Click on the small plus-icon in the top-right corner of DevTools
Ctrl+V, thus pasting in the selector
Hit tab: you can now add css properties.
Reproduce the above steps, except copy the second selector from above instead of the first.
This time when you hit tab, you couldn't start adding css properties but instead the selector (and thus style rule) just disappeared.
It doesn't disappear, but it's not a selector for an element, per se, it's a selector for an element's state, the :hover state. That's why when you put in the dev tools it looks like it's gone, but it's not; it is there you just need to activate the :hover state using dev tools, on the element you want to see the rules.
To do that right-click on the element whose state you want to change and select :hover
OP's comment:
If this were the cause, then both selectors would have the same
result, since both containing only :hover related selectors. Hitting
tab should let the user enter css that should be applicable to the
entered selector. However, the described behaviour is present.
That's because your last selector is a pseudo element ::before so you need to select it after selecting the :hover state.
Something like this (notice yellow bullet - meaning hover state selected):
If that doesn't work, it might be that your CSS selector doesn't match your DOM.
When looking at the elements of a page that I am analyzing using Chrome DevTools, I am seeing the following weird display:
What is that "(1)" in the end? Since the source is user agent stylesheet, I can't drill down any further.
In the Elements panel, I see similar weirdness:
I thought parentheses were not permitted in CSS selector names. What is the "primaryNavId:(primaryLi1)" being used above?
UPDATE:
A more detailed screencap of the "inherited from" line (Styles pane):
When I click on the "inherited from" line, I get the following in the Styles pane:
UPDATE 2 - FIREFOX INSPECT:
Firefox displays the same information in the Elements pane for the item in question, but the Styles panel shows it differently, as follows:
What a mess. Now I understand why you tagged your original question (and this one) css-selectors.
To start, browser developer tools naïvely assume that classes and IDs don't contain any special CSS selector characters and can therefore be represented in CSS selector notation without any escape sequences. So what you get is something that looks like a selector, but on closer inspection is actually malformed. You can see evidence of this in pretty much every browser's developer tools. The breadcrumb navigation, for example, in every one of them will list the li element as li followed by a period (for a class selector) followed by the class name without any escape sequences. Evidently the same appears to hold true for IDs.
It would seem that Google Chrome uses this same notation for "Inherited from" labels. Firefox is smart enough to only list the element's element type (which is far more predictable), i.e. "Inherited from li", and display the actual style rule and the actual selector from the source CSS, but its breadcrumb navigation suffers from the same problem making it kind of moot.
What you're looking at in the element inspector, however, is not a selector. It's an HTML class attribute. The syntactic rules are completely different. And that's why I said that this answer of mine that you previously linked to was completely irrelevant to your original question. But I can see why you're confused, seeing as HTML and CSS are closely related and CSS has dedicated class and ID selectors. (I suspect there wouldn't be any confusion if we were forced to use quoted attribute selectors for all attributes from the beginning — but attribute selectors weren't even around until CSS2.)
As to why the class name that's reflected in the Styles pane is different from the one that's reflected in the element inspector, the reason for that is not clear. Either you're inspecting different elements altogether, or something else is at play (and judging by the cryptic-looking class names, it may well be some funky client-side scripting framework voodoo magic).
Is there a way to see exactly which declaration is affecting an element. Rather than looking at a million properties in the Firebug inspector, where depending on how many classes something is assigned may contain a lot of declarations that are lower precedence and therefore not applied. It can get lengthy to find which particular declaration is in fact affecting your element. I see long ignored declarations like this:
ul {
color: green;
}
"Computed style" will show you the end result of all the hierarchies, but not where the style derives from. Maybe I'm missing something simple. Thanks much!
JSBIN
Edit:
I've heard that I should be able to expand attributes in the Computed tag, however I don't see where that option is available. I can see that the font-size is 13.333px, but no option to see where that's coming from.
Yes, in Firebug select the element and then click on the 'Computed' tab (when viewing the HTML frame). Here you will see a list of CSS properties than can be expanded to show the location of the relevant CSS.
The Computed side panel can give you this info.
Note that it just shows the CSS trace - i.e. the styles that are affecting a specific CSS property - for those properties, which are actually changed by the CSS rules of your stylesheet. Though it can display all computed values for an element. To hide the unchanged ones you can uncheck the option Show User Agent CSS.
Also please ensure that you have a current version of Firefox installed (current stable is 20.0.1). Firebug internally uses some APIs for the style tracing, which are just available on newer versions of Firefox.
In Chrome DevTools there is 'computed style' panel which shows you the list of styles for an element property and their locations. For example see the screenshot for text-decoration property.
I was wondering if anyone knew of a tool that will, when given a number of css files/css rules and a selector - classname, id, element etc. Return all styles that apply with their precedence ordered.
I not, is this doable via JavaScript - I can get the css rules applicable to an element at the time, but can I get those that have been overridden?
In Firebug you can see all qualified styles for any element. It lets you trace the precedence order, but requires you to use Firefox.
(The presentation image on the Firebug page actually shows this behavior. Note the font-size for the h1 selector has been overridden by the more specific .siteTitle class selector.)
Unless you are looking for something you can automate, Firebug should actually be able to solve this one for you. Bring up the context menu (right click) on an element on a pace, pick "Inspect element" and the Firebug pane appears. In the right hand side, you got all CSS rules relevant for the element - those that are overridden are marked with strike-through text:
(source: getfirebug.com)
Try any developer toolbar for Iexplorer or Firefox. Most of them will be able to show exactly what style will be applied to elements. I recon that for example Firebug (addin for Mozilla Firefox) can show what styles will be applied, and where they are overwritten by other styles. Good luck ;).
edit: IE Developer Toolbar also has this functionality.