Is there a tool that will ID the exact CSS class in a browser?

I have Firebug and IE Web Developers' toolbars installed on my machine, and they are very helpful for investigating CSS classes, DIVs, etc. My problem is that I'm working in Wordpress (custom Genesis theme) and I need to know the exact syntax of CSS class when it is nested rather deep. Yes, I can look at the code and see the code, but I'm not able to derive the CSS class sucessfully.

For example:

<div id="inner"> <div id="content-sidebar-wrap"> <div id="sidebar-alt" class="sidebar widget-area">

<div id="menu-pages-7" class="widget menupages"> <div class="widget-wrap">

<ul class="nav"> <li class="page_item page-item-12 current_page_ancestor current_page_parent">

<a href="http://mywebsite.org/wordpress/about-us/" title="About Us">About Us</a> <ul class="children">

<li class="page_item page-item-117 current_page_item"> <a href="http://mywebsite.org/wordpress/about-us/contact-us/" title="Contact Us">Contact Us</a> </li>

I want the parent to have different formatting than the child item, but

#sidebar-开发者_开发知识库alt .nav li { border-bottom: 0px dashed #003893; }

doesn't make anything happen th way I want it to.

Yes, I realize that I need to learn my CSS better, but there are so many nestings, I would simply love to have a browser tool that would allow me to click on a portion of the page and it would tell me the class that bit of text is and how the class should read in the CSS. When I use Inspect in Firebug, I get a number of different existing classes that apply, but not necessarily that exact class that I could add to the style sheet to customize.

Any help would be greatly appreciated.

Maybe this would work:

http://www.downcase.com/project/firequark