ErwinGO ErwinGO - 1 month ago 9
CSS Question

Is there a way I can know what files are affected by a CSS rule using Sublime Text 2?

As above, I want to be able to find all files in a project which are affected by a css rule.
For example, I type "#header .container li" and I got all the files where that rule is applied.

Just to be more clear, let's say I have a project with these html files:

File 1:
---------------------
<html>
<div id="header">
<div class="container">
<ul>
<li>Something</li>
<li>Something</li>
</ul>
</div>
</div>
</html>
---------------------

File 2:
---------------------
<html>
<div id="header2">
<div class="container">
<ul>
<li>Something</li>
<li>Something</li>
</ul>
</div>
</div>
</html>
---------------------

File 3:
---------------------
<html>
<div id="header">
<div class="container">
<ul>
<li class="nomatter">Something</li>
<li>Something</li>
</ul>
</div>
</div>
</html>
---------------------


If I type "#header .container li" (CSS rule) I expect to get file 1 and file 3 since them are affected by the css rule I typed.

Answer

Use the plugin/package Element Finder (nodejs is required).

Copied from an introduction post of its author:

Element Finder is a tool for web developers to find which HTML files contain elements matching a specific CSS selector. You might be new on a project, returning to a project that you haven’t worked on for a while, or maybe a CSS selector is just unclear and you’re not sure exactly which pages it will effect. Just copy a CSS selector into Element Finder and you will quickly see all of the HTML elements in your project which match that selector. For example if you search for div.main, it will show you all the DIV elements with a classname of main.

Comments