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

There's no definitive way to infer which selector overrides a given style (as far as I know), but the dev tools interface is intuitive enough that it's normally straightforward to work it out.

Your overriden style shows with a strike through. To find out which selector overrides it, look for an unstruck version of the same rule.

Sometimes this is as easy as seeing:

color: red;

And having to look for a selector with:

color: blue;

Chrome dev tools actually sorts the selectors by priority, so if you find an overridden, style you can be guaranteed that the override will be in the same selector or in one of the ones above it.

But you'll have to remember that some rules are composed of others and you won't always find a corresponding rule with the same name. In your example your border-color rule is being overriden by the border rule from the above selector. The border rule is shorthand for specifying border-width, border-style and border-color.