Getting path to targeted class's param through ,for styles.less


Hi, i’m customizing atom’s appearance and got pretty basic question: how ,for overwrite config ,to get patch to class which defining targeted param;, would appreciate any help


What about atom-workspace div.setting-description?


Thanks for responce

Doesn’t looks like (

atom-workspace div.setting-description {
 color: rgba(225, 225, 225, 1);

(didn’t worked) )

Also, the thread’s question is how to get such path trough the (not only in this particular case).


Why is it such problematic? i thought extracting path from the tools is pretty basic scripting action


I’m not sure what you mean. That is all pure CSS and HTML. It’s no more problematic than with any other website. Are you sure you’ve got the right specificity for the selectors?


If you mean “rights” then: how to check?, If you asking ,you think atom-workspace div.setting-description should work?;, Yes i don’t know how to get the path trough the tools (in atom and web browsers)


The dev tools are very interactive: the colour boxes can be clicked and used to change colours live. There’s a lot more it can do, but I don’t actually know how to properly use them. My comment was also to point out that a CSS tutorial would probably help more than asking here.

In any case, the following should turn all the text green

atom-workspace .settings-view .setting-description {
  color: rgb(100, 200, 100);

I got the classes by clicking the ones listed in the Styles box. atom-workspace wasn’t there, but adding it may guard against accidentally turning something else green.


Damn, i did tried atom-workspace .settings-view .setting-description, guess made some syntax mistake, it worked
I know i can change displayed colors (trough the tools), but how to apply the changes (they reset after page reload or program restart)?


To make them permanent, you’d have to add them to the styles.less file.


So its just for preview thing
thanks for the answers


You could also override with !important at the end of the CSS change:

atom-workspace div.setting-description {
 color: rgba(225, 225, 225, 1) !important;


So what difference it makes from same without the keyword?