Any tool to show you all elements/pages in a site that are affected by a particular CSS rule?

Question

Of course we can use tools like Firebug to highlight portions of HTML and see what all CSS is being applied.

But what about the reverse? Is there some kind of tool which would allow you to highlight a particular CSS rule and show you all the pages on a site (either static HTML pages or their dynamic templates) that it applies to?

Example: I've come to work on a new site, very large and I need to edit CSS on a particular page but in doing so, I have no idea how many other pages on the site might also have these class names and hence be affected. Of course I can try to search the whole site for the class name(s) but this can be time consuming or tricky. This site has a class named "ba" for example. Guess how many irrelevant pages will turn up if I just search for "ba"? So how about including a double quote ("ba)? Well, it could be in the middle of a few other classes (class="hz ba top"), at the end (class="hz ba"), etc. More so, it could be dynamically plugged in via server side code making it even harder to find. A tool that could somehow spider your site and be able to identify all the places your CSS change will affect would be great.

Answer 1

not exactly that, but there is a firebug plugin that does that for any loaded page:

http://robertnyman.com/firefinder/

Answer 2

If you use a Mac, there's an excellent shareware app called "CSSEdit" by an Indy Mac Shop in Belgium. A single-user license is 30 euros. I've used it for approx. three years and i can recommend it highly. It's a mature, stable App (though continuously updated/improved); widely used among Mac Web Designers, and those of use who are not but need all the help we can get, which CSSEdit certainly seems to provide.

To show elements on the html page styled by a given selector:

(i) open both the style sheet and the markup page (markup page must have a link to the style sheet);

(ii) click the X-Ray button off (must read 'Not Active' below the button);

(iii) in the style editor, click any selector (i click it so that my cursor is at the left margin, e.g., in front of the '#', etc.);

(iv) now click 'inspector' on the mark-up page (next to 'X-ray').

Now, look at your mark-up page--it will have a blue outline around the elements affect by the style you clicked on in step (iii) above.

Answer 3

You could use regular expressions ..

for example in Dreamweaver on the search dialog box :

1. select 'Find in: Entire current local site.."
2. select 'Search: Source code'
3. check 'Use regular expression'
4. in the find textarea type class\s*?=\s*?".*?content.*?"
5. click 'find all'

the same regular expression could be used with other software that can search inside files using regular expressions....
for example : http://www.sowsoft.com/search.htm (not affiliated with them, just found it for here..)

Keep in mind though, that all the suggestions here do not take into account the case where the class is added by script..

Answer 4

For this kind of things I just use grep, or - even better, ack. If you're concerned about false positive when searching for short patterns, you can do a double filter: you grep all lines containing class= and you feed its output in another grep which only narrows the result down to the lines containing both class= and your search pattern (which can also be more precisely specified with a regexp using word boundaries like \bba\b to avoid matching bar or abba)