CODEWITHSUNDEEP
cssfirebug
stu
stu

Reputation: 8805

In firebug, how do I find out all of the css styles being applied to a particular element?

I'm way buried in many nested levels of css, and I can't tell which style layer/level is messing up my display. How can I find out everything that's being applied to a particular element?

Upvotes: 4

Views: 3737

Answers (4)

Ken
Ken

Reputation: 78852

from the 'CSS' tab, click on "Inspect" and then click on the element. All the applied styles (and their origin) will show up on the right hand side.

Upvotes: 1

Mikezx6r
Mikezx6r

Reputation: 16905

Use the Inspect button. Click on the item you're interested in. On the right-hand side, Firebug shows all the styles of the element, and the file + line number they originiated from.

Find the style you're trying to apply, and see if it has a stroke through it. If it does, it's being overridden by something higher in the hierarchy.

Now you have to decide how you want to solve it. Either by making your css entry more specific to the item in question, or modifying your styles in some other manner.

Upvotes: 2

Paul Dixon
Paul Dixon

Reputation: 300825

Right click the element and choose "Inspect Element", then you should see the element and all of the CSS rules which contributed to it. You can modify the rules simply by clicking and editing the values to try out different things to correct problems.

Upvotes: 2

Eric
Eric

Reputation: 19863

Click Inspect (upper left) to select the element you want to check

then on the right panel select the tab labeled "Style". It will also tell you from which .css file that particular property comes from

Upvotes: 14

Related Questions