CODEWITHSUNDEEP
cssgoogle-chromedeveloper-toolsinspector
Ramon K.
Ramon K.

Reputation: 3502

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

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.

Upvotes: 219

Views: 75205

Answers (3)

josh3736
josh3736

Reputation: 144842

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

Upvotes: 311

Peter Rasmussen
Peter Rasmussen

Reputation: 16922

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).

Upvotes: 2

user1902091
user1902091

Reputation: 89

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.

Upvotes: 8

Related Questions