How to edit css selectors to test something in Firebug?

Question

How to edit selectors to test something in Firebug?

for example if i want to test

this

#Homepage #thirdCol a

as a

#Homepage #thirdCol > a

how to test like this in firebug

Brock Adams · Accepted Answer · 2010-06-16 08:06:34Z

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.

I tried but it's not working shup.com/Shup/365076/11051672631-My-Desktop.png
That looks like the main CSS for SO. It works fine for me (I can edit it). Make sure the browser cache is on and reload the page.
yes u r right. i keep cache disable always. now it's working.

Sean Patrick Floyd · Accepted Answer · 2010-06-16 07:28:38Z

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

Sjoerd · Accepted Answer · 2010-06-16 06:10:58Z

0

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

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

answered Jun 16, 2010 at 6:10

75.9k16 gold badges140 silver badges180 bronze badges

1 Comment

This doesn't allow changing or deleting an existing selector (unless it's coded in the html page itself). It merely allows adding a new one.

erikvold · Accepted Answer · 2010-06-29 21:53:45Z

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

you should now be able to edit the selector.