Search code examples
htmlcssdeveloper-toolsweb-inspector

How do you determine what is overriding your style?

When fiddling around with styles of sample code, I find the code has styles that will override my style because they will use a higher priority reference (e.g.: .div .class > .class).

I will encounter situations like this:

enter image description here

How do I find out what style is overriding my style? I want to avoid using !important because eventually I'll end up in the same situation.

EDIT: I'm not asking why this is happening. I already know about priority, hence why I mentioned that .div .class has a higher priority than .class. I want to trace what is actually being used instead of simply telling me it is "inactive". Also, I already know about Chrome Developer because the screen shot is from Chrome Developer.

EDIT: actual problem fixed, but the question still remains... is there an easier way to see what causes the override?

Fix: I just needed the selector in the proper order. .box first, then .box-blue.

enter image description here

Solution

  • In devtools, in the style inspector, choose Computed. Find the property you are interested in and click it. You will see a list of all the rules that apply to this property, with the active one at the top, and each with a file/line reference to where it is defined.

    Consider the following HTML:

    <style>
  #foo { color: red; }
  p    { color: blue; }
</style>

<p id="foo">What color am I?</p>

    You would see the following:

    enter image description here