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


Tags: css,firebug,stylesheet

Problem :

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.



Solution :

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).


    CSS Howto..

    How to select via regex all class notations in css file

    How to uncover an image with css and jQuery

    Can't show Combobox in table

    How to overlay a form field over an image with a fixed width?

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

    How to add sub-menu (css) under actual sub-menu in WordPress

    In CSS how to achieve, two cells with auto width in fixed width parent, with priority to see content in second cell and with ellipsis at first cell?

    how can we prevent a block from being printed across different pages

    How to show sorting order if column width is smaller than caption in free jqgrid

    How can I make a circle using css and apply it to my header?

    How can I zoom this gallery without moving the other pictures?

    How to add a CSS class to an element using a jQuery Selector?

    How to restrict pasting text in an input text field in html

    How to setup flexible box CSS through jQuery? css( display, '-moz-box') doesn't seem to work?

    how to give css only the 1st label span?

    How can I make the parent div draggable

    How to remove curved line in HTML/CSS

    How can I align an image to the center in a Bootstrap column?

    How to repeat multiple images over one element using CSS

    How to make an object go to a higher layer

    How to Move Parent Div Position using css on hover

    How to add custom css responsive in Avada WP Theme?

    How to change an image on click using CSS alone?

    How to get text in css to appear in the vertical middle

    how to show limited text in css [closed]

    How can I have a CSS hover affect a different tag?

    How to place 2 div side by side (alternative solution)

    How to make CSS/HTML prototyping faster for engineers without strong CSS skills?

    How to use body_class to change css according to page hierarchy

    How to make arrows on both sides of a box using css [duplicate]