How do you determine what is overriding your style?

Question

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.

In case anyone is curious. This is adapted code for an Angular drag-and-drop script. http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested I like what it does, but the demo is terrible... — Nelson, Jan 09 '16 at 04:58
if you just look three lines higher in the style inspector, you will see a non-crossed-out entry for `border` which is what is setting the border color.That is the one that is active. — , Jan 09 '16 at 05:02
Although true in this scenario, if the style obtains higher priority from chaining, like `.container .box-blue`, it won't be nearly as convenient to find. — Nelson, Jan 09 '16 at 05:12

score 32 · Accepted Answer · answered Jan 09 '16 at 05:16

32

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:

answered Jan 09 '16 at 05:16

Nice. Never knew about this... will be using this a LOT more for sure. – Nelson Jan 09 '16 at 05:19
1

For the context of the solution... If I used this, I would immediately see that the `transparent` style is overriding the color, and clicking on the link brings me to the code with the style, letting me fix it within seconds instead of asking a question on StackOverflow :) – Nelson Jan 09 '16 at 05:25

Bogie · Answer 2 · 2016-01-09T04:45:57.240

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.

score 2 · Answer 3 · edited Jan 09 '16 at 04:29

2

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.

edited Jan 09 '16 at 04:29

Mi-Creativity

9,554
10
38
47

answered Jan 09 '16 at 04:24

John Hascall

9,176
6
48
72

Could you please explain your answer a bit more? – Nimeshka Srimal Jan 09 '16 at 04:25
@user3571366 Better? – John Hascall Jan 09 '16 at 04:28
Thanks...now it's clear..+1 – Nimeshka Srimal Jan 09 '16 at 04:31
1

Here is info on the selector priority rules http://stackoverflow.com/questions/4072365/css-understanding-the-selectors-priority-specificity should you need that. – John Hascall Jan 09 '16 at 04:32
I don't believe it's correct that mousing over an element shows you its CSS styles. Anyway, he already knows, as he said, those tools. He's interested in finding out which rules are overriding other rules. – Jan 09 '16 at 05:05
Depends on the tool. In the Chrome Developer Tool, you do need to click on the item in the outline to see the style info. – John Hascall Jan 09 '16 at 05:10

Dan Prince · Answer 4 · 2016-01-09T04:58:34.363

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.

Hmm, looks like the "transparent" from `border` is overriding my color, and the demo had the `.box-blue` CSS lower than the `.box` so that took priority due to being lower down. I simply copied them out of order... wish this could be less painful lol. — Nelson, Jan 09 '16 at 04:49
It's not too bad. Mostly you won't be dealing with the composite rule overrides, especially if you start to keep them at the top of your selectors. — Dan Prince, Jan 09 '16 at 04:55

score 1 · Answer 5 · edited Jan 09 '16 at 05:17

1

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.

edited Jan 09 '16 at 05:17

answered Jan 09 '16 at 04:47

NiroshanJ

558
1
5
20

score 1 · Answer 6 · edited Jun 20 '20 at 09:12

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.

HTMLNoob · Answer 7 · 2016-01-09T04:32:00.333

0

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.

edited Jan 09 '16 at 04:32

answered Jan 09 '16 at 04:26

HTMLNoob

821
7
14

Well, not *everything*. If there's two things with !important, the other rules will determine which is more specific. – Adam D. Ruppe Jan 09 '16 at 04:29
Thank you. I actually didnt know that. I will edit and correct that. :) – HTMLNoob Jan 09 '16 at 04:30
This does not answer the question, which is how to tell which styles are overridden by which. – Jan 09 '16 at 05:03

How do you determine what is overriding your style?

7 Answers7

Overridden declarations

Linked