Rob Sobers Rob Sobers - 9 months ago 79
CSS Question

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

I'm inspecting an

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?


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

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>