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

css google-chrome developer-tools inspector
Ramon K. picture Ramon K. · Dec 13, 2012 · Viewed 61.6k times · Source

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.

Answer

josh3736 picture josh3736 · Dec 13, 2012

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

Related questions

Is it possible to emulate orientation in a browser?

As the title is it possible to emulate orientation in google chrome or firefox? Meaning somehow change the browser to support media query (orientation = (landscape or portrait)) I have a emulator for mobile, but I would like to have the …

Read More
Is there CSS Grid highlighting in Chrome Developer Tools?

In the developer tools of Firefox, it is possible see the CSS grid, and also see when it is not selected. Is it possible to show a CSS Grid in the developer tools of Chrome, also when the grid is …

Read More
Chrome Device Mode Emulation Media Queries Not Working

For some reason device emulation mode is not reading my media queries. It works on other sites including my own sites that I made with bootstrap, but it's not working on media queries I am using from scratch (clicking the …

Read More