Find in Files with CSS Selectors

Most code editing software has a Find in Files tool, where you can search through all of the files in your project for a string or regular expression. But that isn’t much help if you want to find the files which contain HTML elements matching a CSS selector. That’s why I have built Element Finder.

Element Finder searches through your project for any given CSS selector, for example `.layout-fluid #sidebar`, and provides a list of the files which contain elements matching that selector. In this example that would be any element with an ID of `sidebar` which is a descendant of an element with a class of `layout-fluid`.

This is useful for front-end developers because sometimes when we have to modify a CSS rule, it is not clear if the change will have implications on other pages. This is particularly the case for large projects involving multiple front-end developers.

It is easy to use Element Finder from the command line. First you need to `cd` into the directory you would like to search. Then run `elfinder` and pass in the selector you would like to search for as the `-s` argument.
elfinder -s ".layout-fluid #sidebar"

When you press `Enter`, Element Finder will run and display the results:
Searching for ".layout-fluid #sidebar" in 3 files in "/Users/kestreet/Projects/MyProject". Found 2 matches in 2 files.

Element Finder ignores `.git` and `.svn` files by default. You can ignore other files too with the `-i` argument. If you wanted to search all files except for files in the `partials` folder, you would run:

elfinder -s ".layout-fluid #sidebar" -i ".git, .svn, partials"

Element Finder only searches files with an extension of `html` by default. If you would like to search other files, set the `-x` argument. For example:

elfinder -s ".layout-fluid #sidebar" -x "html, shtml, htm"

If you edit in Vim you can call Element Finder directly from your code editor. Just run:

:!elfinder -s ".layout-fluid #sidebar"

How it works

Element Finder is built with Node JS. JavaScript was designed for interacting with web pages so it is a natural fit for this app. Another benefit is that front-end developers know JavaScript, so it should be easy for other people to fork Element Finder and change it to suit their needs.

Element Finder utilises a number of useful Node JS modules for building command line apps, such as TJ Holowaychuk’s commander.js and node-progress. Elijah Insua’s jsdom module is used to construct a W3C conforming DOM for each HTML file we need to search. Sizzle JS is used to find matches for the search input in the DOM. Sizzle JS is jQuery’s selector engine, which means Element Finder will consistently return the same elements as the jQuery selectors in your JavaScript.

Looking forward

It would be useful to have Element Finder implemented as a plugin in Vim, Sublime Text and other code editors. But in the meantime I hope you will find it useful as a command line app. Technically the app should work in Mac, Windows and Linux, but so far I have only tested it on a Mac. For installation instructions, visit Element Finder on GitHub.

18 thoughts on “Find in Files with CSS Selectors

  1. tsdtsdtsd

    Very nice tool, thanks for sharing :)

    I had an idea to make it even more usefull if one uses CSS frameworks like bootstrap:
    while deploying a project, you could check all bootstrap selectors if they are actually used in the particular projects templates and remove the unnecessary ones.

    what do you think about that?

    Reply
    1. keeganstreet Post author

      Hey tsdtsdtsd, I agree that is a good idea to remove unused CSS selectors to reduce filesize, but I don’t think Element Finder is the tool for this. I want to keep Element Finder focused on solving one problem, and that is finding elements based on a CSS selector. Before I built the tool I did some research into other related tools, and there are some online services which apparently scan your stylesheets and give you a report on unused selectors: https://www.google.com/?q=find+unused+CSS+selectors

      Reply
    1. keeganstreet Post author

      I don’t think you can actually, but my colleagues and I have a Sublime plugin for Element Finder in the works. Please provide a link if I’m wrong so we don’t waste our time! :-p

      Reply
    1. keeganstreet Post author

      Hi frazras, they are related in that they both search through files, but they search for different things. Use grep if you want to search for a string or regular expression. Use Element Finder if you want to search for a CSS selector. For example you can’t use grep to find all HTML paragraph elements which are a descendant of a section element.

      Reply
  2. David

    How fast is this? Does it work well on huge projects? What about dynamic pieces where I might add a class at run time (on the server or client)?

    Reply
    1. keeganstreet Post author

      Hi David,

      It depends on your definition of fast. As an example, searching through 10 large HTML files (total 1.6MB) for all <p> elements took 4 seconds on my MacBook, returning 913 matches. That’s not as fast as a plain text or regular expression search, because Element Finder has to construct a DOM for each page it searches, but it is fast enough to be useful.

      Element FInder is best suited for searching through front-end templates, where you have one template per page-type. It is not designed for searching through production sites with thousands of pages. If you don’t have front-end templates, for example if you are using WordPress, you could use `wget` to crawl your site and save all the pages as plain HTML. I have explained this approach in more detail in another post – http://keegan.st/2012/06/21/use-wget-and-elfinder-together-to-search-for-a-css-selector-in-all-pages-of-a-remote-site/

      Cheers,
      Keegan

      Reply
  3. Chris

    Seems like a really cool tool, thanks! Would you be able to point out how to add support for PHP/Rails/ASP? It seems to shy away from class/id strings that have left angle brackets (<) in them, e.g. <div class="some-class <%= some_code =>">

    Reply
  4. Pingback: Powerful Workflow Tips, Tools And Tricks For Web Designers | Smashing Magazine

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>