Question

I use Firebug and Web Developer Firefox extensions. One feature I am looking for and which I am not sure if they exist in these extensions is when I am looking at a webpage source, I want to click on a class or id name and somewhere it displays the definition of that class or id. Not the css inheritance hierarchy. Just the particular class or id if they exist

For example:

…..
I click on “header” and I get the css definition or it tells me there are none. I want to filter the css tree hierarchy to just display that class.

Any extensions can do that?

Answer 1

Firebug can do that. Open the HTML-tab, select the element you are interested in. Look in the right box of the firebug window under the style-tab. There you will see each style applied to the element be it by id, class or any other type of selector. You can also check out the layout-tab to see the offset, margin, padding and width of the selected element.

For instance, here on StackOverflow, when I click on the body-element, I see the following:

body {           /* File: all.css?v=3496 (row 1) */
    background:#FFFFFF none repeat scroll 0 0;
    color:#000000;
    font-family:Arial,Helvetica,sans-serif;
    font-size:80%;
    text-align:center;
}
body {           /* File: all.css?v=3496 (rad 1) */
    line-height:1;
}
/* + A lot of reset styles for all elements */