Chrome developer tools Style tab showing faded CSS definition, why?
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.
It means that the rule has been inherited:
http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style
Rules that are faded are not applied to the element.
Take a look at this example
<!-- HTML -->
<div>
<span>Test</span>
</div>
/* CSS */
div {
color: #F0F;
margin: 15px;
stroke: #FFF;
float: left;
}
If you open dev tools, you will notice that margin
and float
are faded, color
and stroke
are not. That is because span
element inherited style rules from its parent, but only color
and stroke
rules are inheritable.