Rob Sobers Rob Sobers - 5 months ago 51
CSS Question

What does it mean when a CSS rule is grayed out in Chrome's element inspector?

I'm inspecting an

h2
element on a web page using Google Chrome's element inspector and some of the CSS rules--which appear to be applied--are grayed out. It seems that a strike-through indicates that a rule was overridden, but what does it mean when a style is grayed out?

Answer

It means that the rule has been inherited, but is not applicable to the selected element:

http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style

The pane contains only properties from rules that are directly applicable to the selected element. In order to additionally display inherited properties, enable the Show inherited checkbox. Such properties will be displayed in a dimmed font.

greyed out rules are inherited from ancestors

Live example: inspect the element containing the text "Hello, world!"

div { 
  margin: 0;
}

div#foo { 
  margin-top: 10px; 
}
<div id="foo">Hello, world!</div>