Chrome Developer Tools: How to find out what is overriding a CSS rule?

CssGoogle ChromeDeveloper ToolsInspector

Css Problem Overview

Well, this is pretty straightforward. If Chrome's Developer Tools is showing me that a style is overridden, how to see what CSS rule is overriding it?

I want to know if is there anything like "Show me what overrides this".

OBS: Please, don't point me to Firebug.

Css Solutions

Solution 1 - Css

Use the Computed Style panel of the element inspector. Expand the property of interest to see the list of applicable rules, and which one won.

Chrome screenshot

Solution 2 - Css

You can simply look at the ones with the same name which aren't striked out, remember the listing is by importance.

Or you can view the computed styles. They will be the actually applied styles.

Solution 3 - Css

crtrl + shift + c and inspect the element. Then find the style without a line through it, in the box in the down right corner.

the override is in most cases at the top (and without a line through it, as this style is the "winning" one).

Categories
Recommended Css Solutions
Recommended Google Chrome Solutions
Recommended Developer Tools Solutions
Recommended Inspector Solutions

Previous Solution:

Combine :after with :hover

CssCss SelectorsPseudo Element

Next Solution:

Brew update failed: untracked working tree files would be overwritten by merge

Homebrew

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRamon K.View Question on Stackoverflow
Solution 1 - Cssjosh3736View Answer on Stackoverflow
Solution 2 - Cssuser1902091View Answer on Stackoverflow
Solution 3 - CssPeter RasmussenView Answer on Stackoverflow