Css – What does it mean when a CSS rule is grayed out in Chrome’s element inspector

browsercssgoogle-chromeinspector

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?

Best Answer

For me the current answers didn't explain the issue fully enough, so I am adding this answer which hopefully might be useful to others.

Greyed/dimmed out text, can mean either

  1. it's a default rule/property the browser applies, which includes defaulted short-hand properties.
  2. It involves inheritance which is a bit more complicated.

Inheritance

Note: Chrome dev tools "style" panel will display a rule set, because one or more rules from the set are being applied to the currently selected DOM node. I guess, for the sake of completeness, dev tools shows all the rules from that set, whether they are applied or not.

In the case where a rule is applied to the currently selected element due to inheritance (i.e. the rule was applied to an ancestor, and the selected element inherited it), chrome will again display the entire ruleset.

The rules which are applied to the currently selected element appear in normal text.

If a rule exists in that set but is not applied because it's a non-inheritable property (e.g. background color), it will appear as greyed/dimmed text.

here is an article that give a good explanation - (Note: the relevant item is at the bottom of the article - figure 21 - unfortunately the relevant section doesn't have a heading) -http://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art033

Excerpt from the article

This [inheritance scenario] can occasionally create a bit of confusion, because defaulted short-hand properties; figure 21 illustrates the defaulted short-hand properties of the font property along with the non-inherited properties. Just be aware of the context that you're looking at when examining elements.

Related Topic