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

Question

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

Answer 1

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.

Answer 2

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.