styri-syntax icon indicating copy to clipboard operation
styri-syntax copied to clipboard

How do I give id selectors in css/html a different color?

Open ghost opened this issue 3 years ago • 2 comments

I love how easy it is to just paint everything with this syntax. However, I discovered that both id and class selectors in CSS and HTML tend to have the same color. I am looking for a way to color them separately. Like, say, making id selectors have a red color in CSS, while CLASS selectors keep the purple color already allocated. image

ghost avatar Jun 27 '21 16:06 ghost

This is what the CSS part in color.less file contains. "syntax-color-css-selector" is just one value, which affects both IDs and Class selectors at the same time. image

ghost avatar Jun 27 '21 16:06 ghost

You can do so by editing Atom's stylesheet ~/.atom/styles.less:

.syntax--source.syntax--css {

  .syntax--id {
    color: red;
  }

  .syntax--class {
    color: orange;
  }
}

chbk avatar Jul 11 '21 19:07 chbk