Is there a way to find out where a css rule is coming from?

Question

I\'ve inherited an .asp website and had to update the pages to relocate forms in tables to the sidebar.

It\'s worked fine on all but one page which stubbornly refu

Answer 1

You may use web inspector in Chrome.

Right click on failing element and select inspect element.

You should end up with web inspector window with two sections: left is html nodes tree and right is styles and properties of selected node. Failing element should be selected already.

Next you need to expand "Computed Style" tab and look for offending style.

When found, you'll see small triangle to the left of style definition - it is clickable. On click it should expand list of selectors that affects this style for this element. You'll see url to css for each of this. Bingo.

Answer 2

As pointed out by austin and Waterlink the Computed styles (or Computed in FF) tab can show the currently applied styles, and their origin.

However, the Styles tab is also very useful. Upon right-clicking "inspect" on an element, the Styles tab will show a Full list of all the active styles and overwritten styles related to the inspected element. (Shows them as they were written in the CSS. Not what is actually being rendered) That way you can tell which styles were overwritten in which order. A style in your css could be overwritten from an inline style, user defined style, a later defined css file or a css rule of higher importance, or even a non-css-attribute such as width/height attributes directly on a HTML-element

The formatting shows the status for a style:

• normal text = active
• strike through = inactive since another style has overwritten it
• greyed out = identifier not applied. ( If you are inspecting the Style of a <p> element and the css identifier is p, span , then the span identifer would be greyed out)

Example:

In this image, the color property of #post a is inactive. It has been overwritten by the color property in #cashieCatalog.

Answer 3

In the HTML tab of Firebug, you should see a panel on the right with tabs Style, Computed, Layout, and DOM. Select Computed. This will show you the "current" style being applied to the page.

If you expand a rule node, you should see a link on the right showing you which style sheet it is coming from, along with stylesheet rules that are being overridden.