diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts
index ea4f574f6d4..21f42946ced 100644
--- a/packages/mermaid/src/diagrams/class/classDb.ts
+++ b/packages/mermaid/src/diagrams/class/classDb.ts
@@ -334,6 +334,7 @@ export class ClassDB implements DiagramDB {
       if (/\d/.exec(_id[0])) {
         id = MERMAID_DOM_ID_PREFIX + id;
       }
+      id = this.splitClassNameAndType(id).className;
       const classNode = this.classes.get(id);
       if (classNode) {
         classNode.cssClasses += ' ' + className;
@@ -376,7 +377,11 @@ export class ClassDB implements DiagramDB {
   public setTooltip(ids: string, tooltip?: string) {
     ids.split(',').forEach((id) => {
       if (tooltip !== undefined) {
-        this.classes.get(id)!.tooltip = sanitizeText(tooltip);
+        const className = this.splitClassNameAndType(id).className;
+        const classNode = this.classes.get(className);
+        if (classNode) {
+          classNode.tooltip = sanitizeText(tooltip);
+        }
       }
     });
   }
@@ -403,6 +408,7 @@ export class ClassDB implements DiagramDB {
       if (/\d/.exec(_id[0])) {
         id = MERMAID_DOM_ID_PREFIX + id;
       }
+      id = this.splitClassNameAndType(id).className;
       const theClass = this.classes.get(id);
       if (theClass) {
         theClass.link = utils.formatUrl(linkStr, config);
@@ -428,7 +434,11 @@ export class ClassDB implements DiagramDB {
   public setClickEvent(ids: string, functionName: string, functionArgs: string) {
     ids.split(',').forEach((id) => {
       this.setClickFunc(id, functionName, functionArgs);
-      this.classes.get(id)!.haveCallback = true;
+      const className = this.splitClassNameAndType(id).className;
+      const classNode = this.classes.get(className);
+      if (classNode) {
+        classNode.haveCallback = true;
+      }
     });
     this.setCssClass(ids, 'clickable');
   }
@@ -443,7 +453,7 @@ export class ClassDB implements DiagramDB {
       return;
     }
 
-    const id = domId;
+    const id = this.splitClassNameAndType(domId).className;
     if (this.classes.has(id)) {
       let argList: string[] = [];
       if (typeof functionArgs === 'string') {
diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
index cb65a136175..e934f0a6fd5 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
@@ -481,6 +481,32 @@ describe('given a basic class diagram, ', function () {
       expect(c2.cssClasses).toBe('default styleClass2');
     });
 
+    it('should apply cssClasses to generic classes', () => {
+      const str = 'classDiagram\n' + 'class C1~T~\n' + 'cssClass "C1~T~" styleClass';
+
+      parser.parse(str);
+
+      const c1 = classDb.getClass('C1');
+      expect(c1.cssClasses).toBe('default styleClass');
+    });
+
+    it('should apply cssClasses to generic classes via shorthand', () => {
+      const str = 'classDiagram\n' + 'class C1~T~:::styleClass';
+
+      parser.parse(str);
+
+      const c1 = classDb.getClass('C1');
+      expect(c1.cssClasses).toBe('default styleClass');
+    });
+
+    it('should bind click event on generic class', () => {
+      const str = 'classDiagram\n' + 'class C1~T~\n' + 'click C1~T~ call someFunction()';
+
+      parser.parse(str);
+      const c1 = classDb.getClass('C1');
+      expect(c1.haveCallback).toBe(true);
+    });
+
     it('should parse multiple classes with same text labels', () => {
       parser.parse(`classDiagram
 class C1["Class with text label"]
@@ -682,7 +708,7 @@ class C13["With Città foreign language"]
         {
           "annotations": [],
           "cssClasses": "default",
-          "domId": "classId-Student-149",
+          "domId": "classId-Student-152",
           "id": "Student",
           "label": "Student",
           "members": [