Is there a way I can know what files are affected by a CSS rule using Sublime Text 2?
Question
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.
2 answers
solution1
1 ACCPTED 2012-12-29 09:19:09
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 ofmain.
solution2
0 2016-10-24 04:24:31
For users on an editor without support for the Element Finder plugin, you can use the same core functionality as a command-line interface with the element-finder npm module (by the same author).
npm install -g element-finder
elfinder -s ".layout-fluid #sidebar" -i ".tmp, dist" -x "html, php"
- -s is CSS selector
- -i is ignored folders
- -x is file extensions to search
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.