1

For a big site renovation project I am looking for a way to find all elements in a website to which a certain css rule applies. This site has been extended for 6+ years, so CSS rules are not systematic/logical at all.

For example: I want to know on which pages form input[type='text']{} is mentioned on the entire site.

I cannot do this with a simple 'find text' search, because there are a LOT of CSS rules that are specifically set to a certain element (e.g. #login form input{} or form textarea.forminput_small{}), so there probably is quite some overlap. Furthermore there are a LOT of pages, so I really don't want to do this manually.

My desired output would be: input[type='text']{} is on: /index.html, /search.html, /contact/form.php etc

For me a solution like a browser plugin, external website tool or PHP script would be fine. Hope someone has a nice solution for this problem!

Edit 9 August 2018: digging up an old thread. However, still not found a good solution, but I did find the element-finder plugin for Atom. Unfortunately, it doesn't work anymore. The GIF image in the description shows what the purpose of this plugin (i.e. my question) is. Any ideas for an alternative?

SJDS
  • 312
  • 7
  • 19
  • Related: http://stackoverflow.com/questions/4361007/is-there-a-way-to-check-which-css-styles-are-being-used-or-not-used-on-a-web-pag – roberrrt-s Sep 02 '16 at 12:45
  • That's certainly related, although not a solution for my problem. This plugin only detects whether a certain rule is used or not. – SJDS Sep 02 '16 at 12:55
  • not clear, you want to search in multiple pages ? for a css rule ? – moolsbytheway Sep 02 '16 at 12:56
  • The only way to see all the rules that apply to a certain element is to inspect it using a browser (my choice: Chrome). All the direct and inherited CSS rules that apply will be visible. That's your starting point. However, you're much more efficient rebuilding it from scratch. – tao Sep 02 '16 at 12:57
  • It's about the whole website indeed. Edited my question a little bit to clarify. To be clear: I'm _not_ looking for a tool like "inpector" which shows which rules are applied to an element. I'm looking for the other way around: which elements (on which pages) are affected by a certain rule. – SJDS Sep 02 '16 at 13:06
  • 1
    Why don't you use an IDE like PhpStorm or WebStor. There are lots of tools in there that kind help you with this. – Dimitri Sep 02 '16 at 16:03
  • I switched to Atom a while ago. Today I needed this functionality again, so decided to search again. I found the element-finder plugin. This one doesn't seem to be working anymore, so I'm looking for a substitute. Edited my answer. – SJDS Aug 09 '18 at 08:40

0 Answers0