CODEWITHSUNDEEP
google-chrome-devtools
Jamie Twells
Jamie Twells

Reputation: 2144

What does it mean when a class style is greyed out in Chrome's style inspector?

Why is the following class (.productQuote) greyed out in the inspector? I can't edit it.

image showing class in Chrome greyed out

Upvotes: 8

Views: 3543

Answers (2)

Gideon Pyzer
Gideon Pyzer

Reputation: 24068

For the currently selected DOM node, this pane displays all the styles applicable to this node. Styles with gray background are read-only, the rest are editable.

Source: Computed Style Pane

Usually the grayed out areas are for user agent stylesheet styles, which are styles defined by the browser vendor. These are typically overridden by your own styles. You can use CSS Reset to normalize the styles across browsers.

I am not totally sure why .productQuote is specifically grayed out here, but my guess is it's come from a Chrome Extension.

Upvotes: 2

the_velour_fog
the_velour_fog

Reputation: 2184

I suspect the Greyed/dimmed out text, is because your currently selected element is inheriting a style property which was applied to an ancestor element.
i.e. the .productQuote class is applying a CSS property, (possibly the background-color) to a parent element, that property has being inherited by your currently selected element.
So its a user-defined style, but because its not applied directly, its greyed out.

Upvotes: 1

Related Questions