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

Answer 1

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

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

Answer 2

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.

Answer 3

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

Answer 4

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.