Is there a easy way that I can look at a computed style on an html element and view where that style came from?

In Firebug and the Web Developer Toolbar, they show computed styles and all of the style sheets that affect the element (and in Firebug it at least appears to be in a confusing order, at least web developer shows the style sheets in the order of precedence).

Right now, I have to look at all of the style sheets that affect an element and try to find the style that affected the computed style.

Is there a better way?

Thanks much! Jon

Edit: here is an example of a possible implementation: http://www.jonkragh.com/wp-content/uploads/computed-style-source.png

2 answers

Ktash 1851
This was chosen as the best answer

This is actually something that the IE Developer Toolbar does the best. In the IE 8 toolbar, you can just click on the 'Trace Style' tab in the right hand pane. In IE 7, you can view an elements style, and when you right click on it, you can say 'trace style' and it should show you where it came from (file, line, etc).

Answered over 8 years ago by Ktash
  • Amazing! THANK YOU!!!!!!!!! Jon Kragh over 8 years ago

In Firebug you can see all the rules applied under the tab "Style". Screenshot here. This view is good because it gives you a view of the cascade, and any rule that isn't decorated with a strike-through are currently applied to the inspected element.

Isn't that what you're after? To trace a certain rule to a stylesheet?

Answered over 8 years ago by Jens Hedqvist
  • Thanks Jen, that is close, but in that example say I wanted to see where the font height came from. I would have to scroll to eventually find it. I'm looking for a way to inspect from a specific style and see the source like this: http://www.jonkragh.com/wp-content/uploads/computed-style-source.png Jon Kragh over 8 years ago