Question

Is any tool / extension out there that helps me generating the CSS signature or style

For example:

I see a HTML object and I want to change it, I right click on my Browser ( Chrome, Firefox ) and I choose to inspect the element, there I will be able to modify any css attribute “live”. Sometimes it’s difficult to know which style signature would correspond to the recent changes.

element.style {
background: none;
}

My question is if there is any tool that tells you what element.style correct name would be., I think may be multiple results per style though…

I’m already using Chrome Firebug like tools. Some elements have no style defined so it appears element.style by default when Inspecting the element. There I can start editing to see how changes would effect.

What I’m asking for is for some tool to change this default style name: “element.style” to a whole correct path for example: .superior_div_class #the_element_you_want_to_edit

Answer 1

In Firebug for Firefox, you can inspect an element as you describe, and then copy either the XPath or Css Path. This gives you the entire path you need right from html down to the specific element.

For example say you are inspecting a link with id myLink. You can copy the Css Path to get something like:

html body form table.myTable tr td a#myLink