CSS Selector picker/finder?

Question

Anyone know of a tool/Firefox Plugin that would allow me to click on a DOM object in a page and give me the CSS inheritances that Is needed to style that element?

So if there are a bunch of nested elements ol li ol li etc... what should my CSS look like to style said element?

Answer 1

Firebug will show you the full path to any element (on top of the HTML tab), but it won't automatically generate a CSS selector.

Answer 2

The Web Developer extension is excellent at this as well. The shortcut is Ctrl+Shift+F to activate the click interface...click on any element to see a full inheritance tree.

Answer 3

You want Firebug.

Once you install it, you can right click on any element in the page and choose "Inspect Element" from the context menu. This shows everything you need to know about the element, including a list of all the CSS styles that are acting upon it. For your purposes, you would probably want to use the first selector in the list.

Answer 4

Have a look at firequark .. It is an extension for firebug that extracts css selector for a single or multiple html nodes

Answer 5

There's no one way to create a selector. Ultimately, doing a full ancestry chain for your selectors is asking for trouble, because whenever your document structure changes, your selectors will break. My rule of thumb is to use #id selectors for singleton elements in your document (i.e. #mainNav or #content) and .class selectors for elements that repeat or for mix-ins (i.e. .menuItem, .external).