Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get the CSS style from Inspect Element

Tags:

css

styles

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

like image 788
Mc- Avatar asked Sep 13 '11 19:09

Mc-


1 Answers

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.

Copy path options

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

like image 163
KP. Avatar answered Oct 24 '22 20:10

KP.