How to know the correct css selector or group of selector for any html element quickly?

Question

How to know the correct selector/group of selector for any html element quickly? I'm working on very long bloated html code. and want to apply css on some specfic areas but it's taking to so much time to find a right css selector for any deeply nested html tag in tables.

for example

#id1 #id2 .class1 .class2 table.no1 tbody td

Is there any quick way or tool to know perfect css selector for any needed elemnt quickly?

I also need to override some css on some elements?

Edit:

After to get answer from @BalucC

In addition i also found this tool for IE users it work same like Web developer toolbar"

MRI: test your selectors

MRI is a bookmarklet for Internet Explorer 6+, and Webkit and Mozilla based browsers (including Safari, Firefox, Camino or Mozilla). Use it to test and play with selectors. http://www.westciv.com/mri/

See screenshot here

Answer 1

IMO, Firebug is the best tool suited to your case. Just "inspect" the page and click on the element either in the page layout or the code itself.

Answer 2

I use this to show me tag hierarchy.

http://westciv.com/xray/

Also, you might try Firebug:

https://addons.mozilla.org/en-US/firefox/addon/1843

EDIT Due to addition information provided:

To override a CSS rule, use "!important". For example,

<style type="text/css">
#id-to-overwrite {
width:25px !important;
}

</style>

Answer 3

No automated tool can know your intent. For example which of these is correct?

td { background: yellow; }
tbody td { background: yellow; }
table table td { background: yellow; }
tr.odd td { background: yellow; }

It's impossible to say without knowing your intent. You may want to deliberate include and/or include elements not only on this page but other pages that also use the same stylesheet. Relevant elements may or may not exist on that page based on dynamic conditions and criteria that determine if they are created.

Short answer? No.

Answer 4

• Firebug for Firefox
• Web Inspector for Webkit, Safari and Chrome
• IE Developer Toolbar for Internet Explorer
• XyleScope and CSSEdit for Mac

Answer 5

The Web Developer Toolbar helps me a lot with this. Just do Ctrl+Shift+F, click the element of interest and check the element chain in the bottom of the toolbar or the Ancestors listing.

Here's a screen (click for full):