Add class to certain file in project window


I’m looking for a way to add a class to a certain file in the project window.
I have the ‘data-path’ and would like to add the class to tree-view-file.

For example say I have the following data-paths

files = ['C:\projects\project-name\index.html','C:\projects\project-name\css\styles.css']

I would like to add the class of open-file to their is="tree-view-file" to add a another style.


The is attribute isn’t a “class” in the CSS sense of the word. It is a way of designating what kind of HTML element that div represents. Attempting to add open-file to the is attribute could break some things. It would be much better if you added open-file to the element’s classList.


Yes I understand that, I was just trying to point out that is where I want to attach the new class too (on the class="" not directly into is="there-view-file").

Is there not anything built into the API to do this?

How would you reference a file in the project window tree?


It depends on how you define “the API”. Atom specifically didn’t cover some things in the Atom API because you can always fall back to using the DOM APIs.

The only time I’ve needed to refer to something in the tree-view it was for my file-type-icons package, which is all in Less.


Okay so I worked out I can use the following to access items on the DOM

file_path         =  "/Users/name/sites/site_folder/index.html"
file_path         = file_path.replace(/(['"])/g, "\\$1"); #escape any quotes in path
file_tree_icon    = document.querySelector '[data-path="'+file_path+'"]'
if file_tree_icon != null
    file_tree = file_tree_icon.parentNode
    file_tree.classList.add "open-file"

Seems to work for OSX unsure if this will work on Windows. Anyone on windows confirm this?