How do you determine what is overriding your style

Question

This question already has an answer here:

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

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:

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.

Answer 1

You can scroll up or down the styles tab in Dev Tools you use from the above example to find the selector overriding .box-blue. Once you found the enabled border-color in another style, then you can determine what selector overriding it.

When you styled .box-blue with border-color: red for example, it could be overriden with another style with the possibly same property, border. Because border: 1px solid blue could be a shorthand for border-width: 1px + border-style: solid + border-color: blue, Then it could be the possibly overriding the previous style.

Answer 2

In your image you can see the .box-blue class's border-color: #bce8f1 rule has been overridden by the border: 1px solid transparent (I cannot see the selector). You can see CSS files of the overridden CSS rules right side of the selectors in Inspect tool.

Sometimes CSS rules might be changed by the JavaScript. It might be shown as inline CSS.

Answer 3

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:

Answer 4

There are browser extension that help with this. I use "Web Developer" in Firefox, but there are many others.

Chrome also has View > Developer > Developer Tools.

If you mouse over an item on the screen they will tell you its path (html > body > div.blah > span.foo) and what css styles were applied to that item.

Answer 5

In Firefox Developer Tools you can find it out in one click near the overridden property in the Inspector:

Overridden declarations

Starting in Firefox 43, overridden declarations have a magnifying glass next to them. Click the magnifying glass to filter the rule view to show only the rules applying to the current node that try to set the same property: that is, the complete cascade for the given property.

This makes it easy to see which rule is overriding the declaration:

https://www.youtube.com/watch?v=i9mDVjJAGwQ

Here's how it looks. Check out the video to see it in action.

Answer 6

Here is a simple explanation.

Certain selectors will override existing ones for example

p {
  color: green;
}
.Paragraphs {
  color: yellow;
}
#paragraph2 {
  color: red;
}

<p>Lorem Ipsum</p>
<p class="Paragraphs">Lorem Ipsum</p>
<p id="paragraph2" class="Paragraphs">Lorem Ipsum</p>
<p class="Paragraphs" style="color: blue">Lorem Ipsum</p>

As shown the selector p is overridden by selector .Paragraphs and the selector #paragraph2 overrides .Paragraphs and the style attribute overrides #paragraph2 and of course any selector with !important will override mostly everything.