diff --git a/src/index.ts b/src/index.ts
index e2ea445..bec3026 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -69,7 +69,9 @@ const sapphireColorSet: IColorSet = {
     class: sapphireColors.teal,
     classMember: sapphireColors.teal,
     type: sapphireColors.green,
-    this: sapphireColors.blue
+    this: sapphireColors.blue,
+    cssClass: sapphireColors.blue,
+    cssId: sapphireColors.red
   },
   ui: {
     background: '#151B24',
diff --git a/src/themeGenerator.ts b/src/themeGenerator.ts
index 2ca17e3..0f76e3f 100644
--- a/src/themeGenerator.ts
+++ b/src/themeGenerator.ts
@@ -18,6 +18,8 @@ export interface IColorSet {
     type?: string;
     modifier?: string;
     this?: string;
+    cssClass?: string;
+    cssId?: string;
   }
   ui?: {
     /** The default background color */
diff --git a/src/vscodeThemeGenerator.ts b/src/vscodeThemeGenerator.ts
index 5c1b29a..65d6708 100644
--- a/src/vscodeThemeGenerator.ts
+++ b/src/vscodeThemeGenerator.ts
@@ -136,7 +136,11 @@ const vscodeJsonThemeRules: IRuleGenerator[] = [
   { source: set => set.syntax.modifier,
     generate: getSimpleColorGenerator('Modifier', 'modifier') },
   { source: set => set.syntax.this,
-    generate: getSimpleColorGenerator('This variable', 'variable.language.this') }
+    generate: getSimpleColorGenerator('This variable', 'variable.language.this') },
+  { source: set => set.syntax.cssClass,
+    generate: getSimpleColorGenerator('CSS class', 'entity.other.attribute-name.class') },
+  { source: set => set.syntax.cssId,
+    generate: getSimpleColorGenerator('CSS ID', 'entity.other.attribute-name.id') }
 ];
 
 export class VscodeThemeGenerator implements IThemeGenerator {