diff --git a/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js b/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js
index 3934f132b..18bdaade5 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js
+++ b/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js
@@ -13,7 +13,7 @@ describe('class diagram, ', function () {
 
       parser.parse(str);
 
-      expect(parser.yy.getClass('Class01').cssClasses[1]).toBe('exClass');
+      expect(parser.yy.getClass('Class01').cssClasses).toBe('default exClass');
     });
 
     it('should be possible to apply a css class to a class directly with struct', function () {
@@ -28,7 +28,7 @@ describe('class diagram, ', function () {
       parser.parse(str);
 
       const testClass = parser.yy.getClass('Class1');
-      expect(testClass.cssClasses[1]).toBe('exClass');
+      expect(testClass.cssClasses).toBe('default exClass');
     });
 
     it('should be possible to apply a css class to a class with relations', function () {
@@ -36,7 +36,7 @@ describe('class diagram, ', function () {
 
       parser.parse(str);
 
-      expect(parser.yy.getClass('Class01').cssClasses[1]).toBe('exClass');
+      expect(parser.yy.getClass('Class01').cssClasses).toBe('default exClass');
     });
 
     it('should be possible to apply a cssClass to a class', function () {
@@ -44,7 +44,7 @@ describe('class diagram, ', function () {
 
       parser.parse(str);
 
-      expect(parser.yy.getClass('Class01').cssClasses[1]).toBe('exClass');
+      expect(parser.yy.getClass('Class01').cssClasses).toBe('default exClass');
     });
 
     it('should be possible to apply a cssClass to a comma separated list of classes', function () {
@@ -53,8 +53,8 @@ describe('class diagram, ', function () {
 
       parser.parse(str);
 
-      expect(parser.yy.getClass('Class01').cssClasses[1]).toBe('exClass');
-      expect(parser.yy.getClass('Class02').cssClasses[1]).toBe('exClass');
+      expect(parser.yy.getClass('Class01').cssClasses).toBe('default exClass');
+      expect(parser.yy.getClass('Class02').cssClasses).toBe('default exClass');
     });
     it('should be possible to apply a style to an individual node', function () {
       const str =
@@ -75,14 +75,14 @@ describe('class diagram, ', function () {
 
       parser.parse(str);
 
-      expect(parser.yy.getClass('Class01').cssClasses[1]).toBe('pink');
+      expect(parser.yy.getClass('Class01').cssClasses).toBe('default pink');
     });
     it('should be possible to define and assign a class using shorthand inside the diagram', function () {
       const str = 'classDiagram\n' + 'class Class01:::pink\n classDef pink fill:#f9f';
 
       parser.parse(str);
 
-      expect(parser.yy.getClass('Class01').cssClasses[1]).toBe('pink');
+      expect(parser.yy.getClass('Class01').cssClasses).toBe('default pink');
     });
     it('should properly assign styles from a class defined inside the diagram', function () {
       const str =
@@ -109,7 +109,7 @@ describe('class diagram, ', function () {
         'stroke:#333',
         'stroke-width:6px',
       ]);
-      expect(parser.yy.getClass('Class01').cssClasses).toStrictEqual(['default', 'pink', 'bold']);
+      expect(parser.yy.getClass('Class01').cssClasses).toBe('default pink bold');
     });
   });
 });
diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
index 003d09fa1..40027f27e 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
@@ -246,7 +246,7 @@ describe('given a basic class diagram, ', function () {
 
       const c1 = classDb.getClass('C1');
       expect(c1.label).toBe('Class 1 with text label');
-      expect(c1.cssClasses[1]).toBe('styleClass');
+      expect(c1.cssClasses).toBe('default styleClass');
     });
 
     it('should parse a class with text label and css class', () => {
@@ -261,7 +261,7 @@ describe('given a basic class diagram, ', function () {
       const c1 = classDb.getClass('C1');
       expect(c1.label).toBe('Class 1 with text label');
       expect(c1.members[0].getDisplayDetails().displayText).toBe('int member1');
-      expect(c1.cssClasses[1]).toBe('styleClass');
+      expect(c1.cssClasses).toBe('default styleClass');
     });
 
     it('should parse two classes with text labels and css classes', () => {
@@ -276,11 +276,11 @@ describe('given a basic class diagram, ', function () {
 
       const c1 = classDb.getClass('C1');
       expect(c1.label).toBe('Class 1 with text label');
-      expect(c1.cssClasses[1]).toBe('styleClass');
+      expect(c1.cssClasses).toBe('default styleClass');
 
       const c2 = classDb.getClass('C2');
       expect(c2.label).toBe('Long long long long long long long long long long label');
-      expect(c2.cssClasses[1]).toBe('styleClass');
+      expect(c2.cssClasses).toBe('default styleClass');
     });
 
     it('should parse two classes with text labels and css class shorthands', () => {
@@ -293,11 +293,11 @@ describe('given a basic class diagram, ', function () {
 
       const c1 = classDb.getClass('C1');
       expect(c1.label).toBe('Class 1 with text label');
-      expect(c1.cssClasses[1]).toBe('styleClass1');
+      expect(c1.cssClasses).toBe('default styleClass1');
 
       const c2 = classDb.getClass('C2');
       expect(c2.label).toBe('Class 2 !@#$%^&*() label');
-      expect(c2.cssClasses[1]).toBe('styleClass2');
+      expect(c2.cssClasses).toBe('default styleClass2');
     });
 
     it('should parse multiple classes with same text labels', () => {
@@ -494,16 +494,13 @@ class C13["With Città foreign language"]
         ],
         methods: [],
         annotations: [],
-        cssClasses: ['default'],
+        cssClasses: 'default',
       });
 
-      expect(classDb.getClasses().size).toBe(3);
       expect(classDb.getClasses().get('Student')).toMatchInlineSnapshot(`
         {
           "annotations": [],
-          "cssClasses": [
-            "default",
-          ],
+          "cssClasses": "default",
           "domId": "classId-Student-141",
           "id": "Student",
           "label": "Student",
@@ -763,7 +760,7 @@ foo()
 
       const actual = parser.yy.getClass('Class1');
       expect(actual.link).toBe('google.com');
-      expect(actual.cssClasses[1]).toBe('clickable');
+      expect(actual.cssClasses).toBe('default clickable');
     });
 
     it('should handle href link with tooltip', function () {
@@ -779,7 +776,7 @@ foo()
       const actual = parser.yy.getClass('Class1');
       expect(actual.link).toBe('google.com');
       expect(actual.tooltip).toBe('A Tooltip');
-      expect(actual.cssClasses[1]).toBe('clickable');
+      expect(actual.cssClasses).toBe('default clickable');
     });
 
     it('should handle href link with tooltip and target', function () {
@@ -798,7 +795,7 @@ foo()
       const actual = parser.yy.getClass('Class1');
       expect(actual.link).toBe('google.com');
       expect(actual.tooltip).toBe('A tooltip');
-      expect(actual.cssClasses[1]).toBe('clickable');
+      expect(actual.cssClasses).toBe('default clickable');
     });
 
     it('should handle function call', function () {
@@ -1493,8 +1490,7 @@ describe('given a class diagram with relationships, ', function () {
 
       const testClass = parser.yy.getClass('Class1');
       expect(testClass.link).toBe('google.com');
-      expect(testClass.cssClasses.length).toBe(2);
-      expect(testClass.cssClasses[1]).toBe('clickable');
+      expect(testClass.cssClasses).toBe('default clickable');
     });
 
     it('should associate click and href link and css appropriately', function () {
@@ -1507,8 +1503,7 @@ describe('given a class diagram with relationships, ', function () {
 
       const testClass = parser.yy.getClass('Class1');
       expect(testClass.link).toBe('google.com');
-      expect(testClass.cssClasses.length).toBe(2);
-      expect(testClass.cssClasses[1]).toBe('clickable');
+      expect(testClass.cssClasses).toBe('default clickable');
     });
 
     it('should associate link with tooltip', function () {
@@ -1522,8 +1517,7 @@ describe('given a class diagram with relationships, ', function () {
       const testClass = parser.yy.getClass('Class1');
       expect(testClass.link).toBe('google.com');
       expect(testClass.tooltip).toBe('A tooltip');
-      expect(testClass.cssClasses.length).toBe(2);
-      expect(testClass.cssClasses[1]).toBe('clickable');
+      expect(testClass.cssClasses).toBe('default clickable');
     });
 
     it('should associate click and href link with tooltip', function () {
@@ -1537,8 +1531,7 @@ describe('given a class diagram with relationships, ', function () {
       const testClass = parser.yy.getClass('Class1');
       expect(testClass.link).toBe('google.com');
       expect(testClass.tooltip).toBe('A tooltip');
-      expect(testClass.cssClasses.length).toBe(2);
-      expect(testClass.cssClasses[1]).toBe('clickable');
+      expect(testClass.cssClasses).toBe('default clickable');
     });
 
     it('should associate click and href link with tooltip and target appropriately', function () {
@@ -1795,8 +1788,7 @@ C1 -->  C2
 
       const c1 = classDb.getClass('C1');
       expect(c1.label).toBe('Class 1 with text label');
-      expect(c1.cssClasses.length).toBe(2);
-      expect(c1.cssClasses[1]).toBe('styleClass');
+      expect(c1.cssClasses).toBe('default styleClass');
       const member = c1.members[0];
       expect(member.getDisplayDetails().displayText).toBe('+member1');
     });
@@ -1812,8 +1804,7 @@ cssClass "C1" styleClass
 
       const c1 = classDb.getClass('C1');
       expect(c1.label).toBe('Class 1 with text label');
-      expect(c1.cssClasses.length).toBe(2);
-      expect(c1.cssClasses[1]).toBe('styleClass');
+      expect(c1.cssClasses).toBe('default styleClass');
       const member = c1.members[0];
       expect(member.getDisplayDetails().displayText).toBe('+member1');
     });
@@ -1830,13 +1821,11 @@ cssClass "C1,C2" styleClass
 
       const c1 = classDb.getClass('C1');
       expect(c1.label).toBe('Class 1 with text label');
-      expect(c1.cssClasses.length).toBe(2);
-      expect(c1.cssClasses[1]).toBe('styleClass');
+      expect(c1.cssClasses).toBe('default styleClass');
 
       const c2 = classDb.getClass('C2');
       expect(c2.label).toBe('Long long long long long long long long long long label');
-      expect(c2.cssClasses.length).toBe(2);
-      expect(c2.cssClasses[1]).toBe('styleClass');
+      expect(c2.cssClasses).toBe('default styleClass');
     });
 
     it('should parse two classes with text labels and css class shorthands', () => {
@@ -1850,13 +1839,11 @@ C1 --> C2
 
       const c1 = classDb.getClass('C1');
       expect(c1.label).toBe('Class 1 with text label');
-      expect(c1.cssClasses.length).toBe(2);
-      expect(c1.cssClasses[1]).toBe('styleClass1');
+      expect(c1.cssClasses).toBe('default styleClass1');
 
       const c2 = classDb.getClass('C2');
       expect(c2.label).toBe('Class 2 !@#$%^&*() label');
-      expect(c2.cssClasses.length).toBe(2);
-      expect(c2.cssClasses[1]).toBe('styleClass2');
+      expect(c2.cssClasses).toBe('default styleClass2');
     });
 
     it('should parse multiple classes with same text labels', () => {