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

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.

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.

[chbk]

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

.syntax--source.syntax--css {

  .syntax--id {
    color: red;
  }

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