CODEWITHSUNDEEP
cssfirefoxfirebug
Jitendra Vyas
Jitendra Vyas

Reputation: 152667

How to edit css selectors to test something in Firebug?

How to edit selectors to test something in Firebug?

alt text http://shup.com/Shup/365060/1105167712-My-Desktop.png

for example if i want to test

this

#Homepage #thirdCol a

as a

#Homepage #thirdCol > a

how to test like this in firebug

Upvotes: 2

Views: 1231

Answers (4)

erikvold
erikvold

Reputation: 16518

  1. Right click once on the '#Homepage #thirdCol a' text that is in your screen shot
  2. Choose 'Inspect in CSS Tab' from the context menu.
  3. Left click once on '#Homepage #thirdCol a' (after the css tab is opened)

you should now be able to edit the selector.

Upvotes: 0

Brock Adams
Brock Adams

Reputation: 93473

In Firebug, select the CSS tab.

The daughter bar will now show: a pause button, an "Edit" control, and the "first" CSS file, next to a down arrow.

Click on that down arrow to select the appropriate CSS file -- which you can identify in the HTML/CSS view.

Then click "Edit" and you can add, change, delete, or comment-out CSS selectors as much as needed.

ETA: See also seanizer's answer. Firebug's HTML+Style pane has direct links to the editable source of the style rules it displays.

Upvotes: 3

Sean Patrick Floyd
Sean Patrick Floyd

Reputation: 298898

  1. Right click an element that has the selector you want to change
  2. Choose 'Inspect Element' from the menu
  3. In the 'Styles' tab, look for the selector you want to change, click the link next to it
  4. the style sheet will open, click the selector label and edit it. changes apply immediately

Upvotes: 1

Sjoerd
Sjoerd

Reputation: 75599

Edit the HTML (using FireBug) and add a new style element.

<style type="text/css">
#Homepage #thirdCol > a {
...
}
</style>

Upvotes: 0

Related Questions