Is there a way to get a list of all the CSS applied to a HTML fragment or page?

Question

I know it's easy to get the CSS that is applied to a single node in HTML, using tools like the Firebug extension for Firefox, etc.

But is there a way to see all the CSS that is in effect on an entire page, or a larger fragment of HTML?

Specifically, we are cleaning up our one extremely large CSS file into smaller modules and would like to find out what CSS is used on a certain page, so we can move all the non-used CSS to another module.

Answer 1

As far as tools go, you could use the css usage plugin for firebug. It will analyze pages for used css.

Or were you looking for a way to do it more programmaticly?

Answer 2

You can try Dust-Me Selectors, it's add-on for firefox, if you use firebug, as you stated, you may find useful CSS Usage.

Answer 3

Thank you all! These are the various solutions I've looked at now from your recommendations (collected here for people with the same problem):

Dust-Me Selectors (Firefox Add-on)
This does exactly what I need. Lists used and unused CSS selectors (for the current page, or the entire site, after spidering), and can dump both lists as CSV text. Great.
https://addons.mozilla.org/firefox/addon/5392/

CSS Usage (Firefox Add-on)
https://addons.mozilla.org/firefox/addon/10704/

WARI - Web Application Resource Inspector (Java tool)
Appears to only handle static code, not dynamically generated HTML as is present in most web applications that use ajax – which, unfortunately, makes it useless, at least for me
http://wari.konem.net/

CSS Redundancy Checker (Ruby script, requires Rubygems and Hpricot)
http://code.google.com/p/css-redundancy-checker/

TopStyle (Windows-only application, $79.95 (!!))
http://svanas.dynip.com/topstyle/

These are all cross-platform and free, except for TopStyle.