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

Question

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?

Solution 1

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.

Solution 2

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.

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

div { 
  margin: 0;
}

div#foo { 
  margin-top: 10px; 
}

<div id="foo">Hello, world!</div>

Solution 3

Michael Coleman has the right answer. I just want to add a simple image to go along with it. The link that he included has this simple example: http://commandlinefanatic.com/art033ex4.html

The HTML/DOM looks like this...

The Styles Pane in Chrome looks like this when you select the p element...

As you can see, the p element inherits from its ancestors (the divs). So why is the style background-color: blue grayed out? Because it's part of a rule-set that has at least one style that is inheritable. That inheritable style is text-indent: 1em

background-color:blue is not inheritable but it's part of the rule-set that contains text-indent: 1em which is inhertiable and the developers of Chrome wanted to be complete when displaying rule-sets. However, to distinguish between styles in the rule-set that are inheritable from styles that are not, the styles that are not inhertable are grayed out.

Solution 4

This also occurs if you add a style through the inspector, but that new style doesn't apply to the element you have selected. Usually the styles shown are only those for the element selected, so the grey indicates that the style you just added doesn't select the element which has focus in the DOM navigator.

Solution 5

It means the rule has been replaced with another rule with higher priority. For example stylesheets with:

h2 {
  color: red;
}
h2 {
  color: blue;
}

The inspector will show the rule color:red; grayed out and color:blue; normally.

Read up on CSS inheritance to learn which rules are inherited/have higher priority.

EDIT:

Mixup: the grayed out rules are the unset rules, which use a special default stylesheet that is applied to all elements(the rules that make the element renderable, because all styles have to have a value).

View more solutions

Comments

[Rob Sobers]

I just tested this and I think that is incorrect. In the case where a rule is overridden, there'll be a strike-through (as my question indicates). See: yfrog.com/f/j3fooep

[tcooc]

@Rob: had a mixup since devtools wasnt starting. I got it running, and edited my answer with my tested answer.

[Rob Sobers]

I'm not entirely sure that's correct either; the faded rules are ones I've set in my own styles sheet (e.g., font-size: 20px;)

[hugo der hungrige]

I know the question is answered, but what about this: I have ul, menu, dir { list-style-type: disc; } in the panel with menu and dir grayed out, which are both no elements of the page. Does that in this case maybe mean that they're declared, but not part of the page?

[drkvogel]

@hugoderhungrige In that case, yes, it means that the style is declared for ul, menu and dir; but menu and dir are not present, so the rule cannot be applied to them, only to ul.

[drkvogel]

@Rob To be precise, when a style is shown greyed out, it means it has been inherited from some other encompassing element but is not applicable to the selected element. From the documentation: "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."

[CodyBugstein]

The link you shared says nothing on the topic. The only "gray" it mentions is when the whole background is gray

[Chuck Le Butt]

This was my issue. Thanks!

[Rob Sobers]

@Imray Yes it does. To quote: " In order to additionally display inherited properties, enable the Show inherited checkbox. Such properties will be displayed in a dimmed font."

[Rob Sobers]

The statement "rules which are inherited, but not applied, they will appear as greyed/dimmed text" is untrue. If not applied, they will have a strikethrough. I've updated my answer with a screenshot and a live example.

[Niko Bellic]

@RobSobers Unfortunately, I don't think your example demonstrates inheritance. Where's the ancestor parent that the div is inheriting from? If you scroll down in the Styels pane in Chrome, you'll see sections titled "Inherited from ..." What do the greyed out rules there mean? Can you incorporate that into an example?

[Niko Bellic]

This is the right answer!!! The key sentence is... "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."

[mhenry1384]

I don't understand why this answer is a. marked as the best answer and b. has so many upvotes. It's clearly wrong. Margins are not inheritable properties (stackoverflow.com/a/5612360/24267) Michael Coleman's answer is the correct one. Oh, you don't mean inherited from an ancestor element, you mean... I'm not sure what you mean exactly. At any rate, this answer isn't correct in 2015, with Chrome 46.

[onlynone]

This is definitely the right answer. If a grayed out property appears within a section that says "Inherited from [selector]", then it is a non-inheritable property that is not applied to the current element. Any crossed out property has been overridden by a more specific style.

[onlynone]

A. You link to the docs for the "Computed" styles tab which is different from the main "Styles" tab. B. You're missing the case of element inheritance, when one element is a child of another and inherits it's style that way. In your example, 'div' and 'div#foo' apply directly to the div element. If you had a 'p' element inside the 'div' and the css for the 'div' had a mix of inheritable/non-inheritable props, then you'd see what the others are talking about.

[David]

Clearly the votes are for some MS Paint magic with the arrows, and that bubble shadow effect. downvoted as incorrect.

[oligan]

@mhenry1384 "a" is easily explainable: because it's written by the person who asked the question.

[moosefetcher]

If rules are greyed out when they're non-inheritable, why does my div element have greyed out 'width' rules? Is width not inheritable? I'm asking this seriously, by the way.

[T.J. Crowder]

This is definitely not the correct answer, not least because the "live example" doesn't demonstrate any greyed-out rules. Coleman's answer is correct.

[Rob Sobers]

@T.J.Crowder I believe the Chrome browser has changed since 2011. I could be wrong about that though. Is there another answer you'd consider correct? I'll happily change it.

[T.J. Crowder]

@ Rob - As I said above, Coleman's answer is correct.

[Suraj Jain]

Hi, Can you remove your answer,it confuses and is not correct, beginner would get confused.

[brandito]

@DavidAnderton it looks to be "ShareX", a screenshot utility, it gives my screenshots similar looking arrows but the dropshadows & text with outline are nearly exactly the same. On topic: I thought OP was talking about user agent stylesheets lol.

[Ben Wheeler]

To understand Michael Coleman's answer, it helps to realize there are two senses of "applied to the currently selected element": 1. the element is affected by the rule (might still be true, even with greyed out rules, because a parent constrains the element, as with max-width) 2. the element has the rule applied to this element in particular (greyed out rules are not being applied in this way) ...

[Ben Wheeler]

... So if you see Chrome greying out css rules which are very much being applied -- where you can uncheck them (or change their values) and see a corresponding change on the page -- it may be that the rule affects the element but is not applied to that element in particular, but to a parent.

[wisbucky]

This is the best answer, as it gives a simple demo. Open that URL in a new tab and use Chrome Developer Tools to select the various divs and p. You will see that background-color is not grayed out for div#two. But background-color is grayed out for div#three and p.

[Dirk Boer]

great explanation

[riv]

I'm getting a custom rule with gray background, which is not inherited (it applies to a single class, which the selected element has). What is causing that?

[FloverOwe]

I don't see a "Show Inherited" checkbox anywhere.

[Faither]

Interesting that a mouse hover on a custom/temp (e.g. just added in the inspector) grayed-out rule highlights the selected element, too, while relatively ignoring the fact that the rule is incorrect.