Find out which class affects a particular element

Question

Is there a way to see which particular ad affects the item. Instead of looking at a million properties in the Firebug inspector, where depending on how many classes are assigned, a lot of declarations can be contained that have lower priority and therefore are not applied. It may take a while to find which particular ad actually affects your item. I see long ignored ads:

ul {
green color;
}
The "calculated style" will show you the end result of all hierarchies, but not where this style comes from. Maybe I missed something simple. Thank you very much!

Jsbin

Edit: I heard that I should be able to expand the attributes in the Computed tag, however I cannot see where this option is available. I see that the font size is 13.333px, but there is no way to see where this comes from.

Answer 1

Yes, in Firebug, select an item, and then go to the Calculated tab (when viewing an HTML frame). Here you will see a list of CSS properties that you can expand to show the location of the corresponding CSS.

Answer 2

The compute sidebar can provide you with this information.

Note that it simply shows the CSS trace — that is, styles that affect a particular CSS property — for those properties that are actually modified by the CSS rules of your stylesheet. Although it can display all calculated values ​​for an element. To hide invariables, you can clear the Show CSS Custom Agent checkbox.

Also make sure you have the current version of Firefox installed (the current stable version is 20.0.1). Firebug internally uses some style tracing APIs that are only available on newer versions of Firefox.

Answer 3

Chrome DevTools has a “computed style” panel that displays a list of styles for an element’s property and their location. For example, see the screenshot for the text-decoration property.