Search code examples
cssgoogle-chromestyles

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


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?


Solution

  • 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.