Chrome Developer Tools: How to find out what is overriding a CSS rule?
Solution 1
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.
Solution 2
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
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).
Related videos on Youtube
Ramon K.
Updated on November 28, 2020Comments
-
Ramon K. over 3 years
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.
-
Zoltan Toth over 11 yearsChrome's Developer Tools also show you the overriding rule
-
-
MrFox almost 9 yearsFor me the computed tab was open at default and therefore not listed as a tab, it should have had a header 'Computed', otherwise you could be looking for a long time.
-
intotecho over 8 yearsThe technique has changed a little as Chrome has advanced. Instead of 'Expand the property of interest' click the spy-glass next to the property and it will show which style won back in the Styles tab.
-
josh3736 over 8 years@intotecho: Chrome 47 has restored the expando in the Computed tab since the magnifying glass change sucked. crbug.com/496263
-
Noone almost 8 yearsIt's not the case when a style is flagged as !important
-
Darkgaze about 7 yearswhat if ALL of them are cancelled? Probably due to a script? How do you find out who did it?
-
josh3736 over 5 yearsIt's still there as the "Computed" tab on the Elements panel.
-
derloopkat over 5 years@josh3736,maybe my css has
!important
but can't find anything overriding in Computed or elsewhere -
Daniel Viglione over 4 yearsI would avoid trying to use !important to begin with. When you start tossing multiple css libraries into the mix, and then you add your own styling yielding unexpected results, you are in for an action-filled evening.