Chrome developer tools Style tab showing faded CSS definition, why?

css google-chrome styles
Raj Parmar picture Raj Parmar · Oct 8, 2012 · Viewed 12.2k times · Source

I've been using Chrome for a long time now and I've never (well not that I can recall) come across CSS definitions in the Style panel that are faded. The selector hasn't been defined else where.

Example:

enter image description here

(Edit: Just to be clear, I'm not referring to the user agent stylesheet)

I can't figure out why it is faded and what this means. The definition appears to be editable but any changes to the values do not persist (i.e. as soon as I click off, it reverts back to original value) and has no effect on the web page.

I couldn't find any reference to this in the documentation for the tool. Can any of you kind folk shed any light on this?

Answer

Roddy of the Frozen Peas picture Roddy of the Frozen Peas · Oct 8, 2012

The "faded" styles are ones that are not applied to the selected tag. So in your screenshot, you have an h1 rule which is normal colored -- that one is applied to whatever element you have selected -- and you have an .SubHeader h1 rule that is not being applied to the selected element.

You'll sometimes see this if you dynamically add a CSS rule (the + button in the chrome dev tools) but modify the selector so it doesn't apply to whichever element you have selected.

Related questions

element.style in chrome element inspector?

When I inspect elements in Chrome, under my styles I have element.style {}, What does this refer to? It contains styles I am not including in my code source.

Read More
Difference between two element styles with Google Chrome

I use Google Chrome developer tools and I am constantly inspecting one element against another back and forth to find out what may be causing a particular styling issue. It would be nice to compare the differences in style between …

Read More
How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More