How to use Firebug to easily find which css file defines a particular style

Question

Maybe I'm just a Firebug newbie, or maybe there is some other better tool? But I'm trying to easily find which of several linked css files, defines a specific element's style.

For instance in a production environment I can pinpoint that a style named left-tab is being applied to a specific element, and it renders properly. In the development environment the same style is applied within the HTML, but is not being rendered the same way as in production.

The production and development environments each include 9 css files. I want to easily find which one defines the style left-tab. Using the CSS tab I can open and even (temporarily) edit each of these, but how do I search through these? Ctrl-F searches the HTML document itself, as opposed to the CSS contained within the Firebug pane.

Answer 1

When you right click an element and click 'inspect element' the box in the bottom right will display CSS styles for that element, just above each one it tells you which CSS file it came from and what line.

Answer 2

Activate the style tab in the right panel "Style | Computed | Layout | DOM ". For every CSS rule, there will be a blue link "mystyles.css (line 22). You can quickly jump to a rule by activating Element Inspector (The box w/ mouse on the far left hand, hotkey is Ctrl + Shift + C. Highlighting over your element with Element Inspector (you can also click on it) will show you all the CSS rules that apply (or were overwritten).