Chrome Developer Tools: How to Find Out What Is Overriding a CSS Rule

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

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.

How do you determine what is overriding your style?

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:

is it possible to see where exactly a certain css style is overridden in chrome dev tool?

1. Bring up the context menu for (Right-click or Ctrl-click on) the target element and choose "Inspect".
   
   or from Dev Tools, click on "Elements".
   
   Then, click on the target element.
   
2. At the right, select "Computed".
   
3. Then expand the target property.
   
4. You can then inspect the CSS source and rule that take final precedence.
   

Safari/Chrome Developer Tools debug CSS overrides

Look at the one which isn't striked out, higher up on the list.

Alternatively, view the computed styles. They will be the definitive applied styles.

What do the crossed style properties in Google Chrome devtools mean?

When a CSS property shows as struck-through, it means that the crossed-out style was applied, but then overridden by a more specific selector, a more local rule, or by a later property within the same rule.

(Special cases: a style will also be shown as struck-through if a style exists in an matching rule but is commented out, or if you've manually disabled it by unchecking it within the Chrome developer tools. It will also show as crossed out, but with an error icon, if the style has a syntax error.)

For example, if a background color was applied to all divs, but a different background color was applied to divs with a certain id, the first color will show up but will be crossed out, as the second color has replaced it (in the property list for the div with that id).

How to find what's ovverrding CSS element?

If you look at the image, it will tell you that the property is changed in the element.style.

In other words, the change is not applied using a selector such as class or id, but rather to the element itself.

This can be done in two ways, as far as I am aware.

1) In HTML, writing the properties directly within the element:

<div style="color:gray;"></div>

2) In Jquery, referencing the specific object (for example, using the id property) and then using the css property:

$('#divname').css({
    color:gray;
});

With regard to finding what is causing the issue:

1) Finding out if the change has been made in HTML should be fairly straightforward, as you would just need to have a look at the HTML file.

2) If the change has been made through Jquery, things get a little more complicated: a ghetto method would be to search your script files for the "gray" string. Don't forget that scripts can also be embedded into HTML, however, looking for the property the HTML file would be a good way to proceed :)

Find out who overrides a class in IE Developer Tools

You can find it in Computed—background-color (need to expand it) in IE 11 Developer Tools:

Or try to search it this way in Chrome DevTools:

---

Related Topics