diff --git a/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js b/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js
index 04529302f..3934f132b 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[0]).toBe('exClass');
+      expect(parser.yy.getClass('Class01').cssClasses[1]).toBe('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[0]).toBe('exClass');
+      expect(testClass.cssClasses[1]).toBe('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[0]).toBe('exClass');
+      expect(parser.yy.getClass('Class01').cssClasses[1]).toBe('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[0]).toBe('exClass');
+      expect(parser.yy.getClass('Class01').cssClasses[1]).toBe('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[0]).toBe('exClass');
-      expect(parser.yy.getClass('Class02').cssClasses[0]).toBe('exClass');
+      expect(parser.yy.getClass('Class01').cssClasses[1]).toBe('exClass');
+      expect(parser.yy.getClass('Class02').cssClasses[1]).toBe('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[0]).toBe('pink');
+      expect(parser.yy.getClass('Class01').cssClasses[1]).toBe('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[0]).toBe('pink');
+      expect(parser.yy.getClass('Class01').cssClasses[1]).toBe('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(['pink', 'bold']);
+      expect(parser.yy.getClass('Class01').cssClasses).toStrictEqual(['default', 'pink', 'bold']);
     });
   });
 });
diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
index c3ed22d72..e689df058 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
@@ -158,7 +158,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[0]).toBe('styleClass');
+      expect(c1.cssClasses[1]).toBe('styleClass');
     });
 
     it('should parse a class with text label and css class', () => {
@@ -173,7 +173,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[0]).toBe('styleClass');
+      expect(c1.cssClasses[1]).toBe('styleClass');
     });
 
     it('should parse two classes with text labels and css classes', () => {
@@ -188,11 +188,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[0]).toBe('styleClass');
+      expect(c1.cssClasses[1]).toBe('styleClass');
 
       const c2 = classDb.getClass('C2');
       expect(c2.label).toBe('Long long long long long long long long long long label');
-      expect(c2.cssClasses[0]).toBe('styleClass');
+      expect(c2.cssClasses[1]).toBe('styleClass');
     });
 
     it('should parse two classes with text labels and css class shorthands', () => {
@@ -205,11 +205,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[0]).toBe('styleClass1');
+      expect(c1.cssClasses[1]).toBe('styleClass1');
 
       const c2 = classDb.getClass('C2');
       expect(c2.label).toBe('Class 2 !@#$%^&*() label');
-      expect(c2.cssClasses[0]).toBe('styleClass2');
+      expect(c2.cssClasses[1]).toBe('styleClass2');
     });
 
     it('should parse multiple classes with same text labels', () => {
@@ -397,7 +397,9 @@ class C13["With Città foreign language"]
       expect(classDb.getClasses().get('Student')).toMatchInlineSnapshot(`
         {
           "annotations": [],
-          "cssClasses": [],
+          "cssClasses": [
+            "default",
+          ],
           "domId": "classId-Student-134",
           "id": "Student",
           "label": "Student",
@@ -657,7 +659,7 @@ foo()
 
       const actual = parser.yy.getClass('Class1');
       expect(actual.link).toBe('google.com');
-      expect(actual.cssClasses[0]).toBe('clickable');
+      expect(actual.cssClasses[1]).toBe('clickable');
     });
 
     it('should handle href link with tooltip', function () {
@@ -673,7 +675,7 @@ foo()
       const actual = parser.yy.getClass('Class1');
       expect(actual.link).toBe('google.com');
       expect(actual.tooltip).toBe('A Tooltip');
-      expect(actual.cssClasses[0]).toBe('clickable');
+      expect(actual.cssClasses[1]).toBe('clickable');
     });
 
     it('should handle href link with tooltip and target', function () {
@@ -692,7 +694,7 @@ foo()
       const actual = parser.yy.getClass('Class1');
       expect(actual.link).toBe('google.com');
       expect(actual.tooltip).toBe('A tooltip');
-      expect(actual.cssClasses[0]).toBe('clickable');
+      expect(actual.cssClasses[1]).toBe('clickable');
     });
 
     it('should handle function call', function () {
@@ -1387,8 +1389,8 @@ 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(1);
-      expect(testClass.cssClasses[0]).toBe('clickable');
+      expect(testClass.cssClasses.length).toBe(2);
+      expect(testClass.cssClasses[1]).toBe('clickable');
     });
 
     it('should associate click and href link and css appropriately', function () {
@@ -1401,8 +1403,8 @@ 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(1);
-      expect(testClass.cssClasses[0]).toBe('clickable');
+      expect(testClass.cssClasses.length).toBe(2);
+      expect(testClass.cssClasses[1]).toBe('clickable');
     });
 
     it('should associate link with tooltip', function () {
@@ -1416,8 +1418,8 @@ 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(1);
-      expect(testClass.cssClasses[0]).toBe('clickable');
+      expect(testClass.cssClasses.length).toBe(2);
+      expect(testClass.cssClasses[1]).toBe('clickable');
     });
 
     it('should associate click and href link with tooltip', function () {
@@ -1431,8 +1433,8 @@ 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(1);
-      expect(testClass.cssClasses[0]).toBe('clickable');
+      expect(testClass.cssClasses.length).toBe(2);
+      expect(testClass.cssClasses[1]).toBe('clickable');
     });
 
     it('should associate click and href link with tooltip and target appropriately', function () {
@@ -1689,8 +1691,8 @@ C1 -->  C2
 
       const c1 = classDb.getClass('C1');
       expect(c1.label).toBe('Class 1 with text label');
-      expect(c1.cssClasses.length).toBe(1);
-      expect(c1.cssClasses[0]).toBe('styleClass');
+      expect(c1.cssClasses.length).toBe(2);
+      expect(c1.cssClasses[1]).toBe('styleClass');
       const member = c1.members[0];
       expect(member.getDisplayDetails().displayText).toBe('+member1');
     });
@@ -1706,8 +1708,8 @@ cssClass "C1" styleClass
 
       const c1 = classDb.getClass('C1');
       expect(c1.label).toBe('Class 1 with text label');
-      expect(c1.cssClasses.length).toBe(1);
-      expect(c1.cssClasses[0]).toBe('styleClass');
+      expect(c1.cssClasses.length).toBe(2);
+      expect(c1.cssClasses[1]).toBe('styleClass');
       const member = c1.members[0];
       expect(member.getDisplayDetails().displayText).toBe('+member1');
     });
@@ -1724,13 +1726,13 @@ cssClass "C1,C2" styleClass
 
       const c1 = classDb.getClass('C1');
       expect(c1.label).toBe('Class 1 with text label');
-      expect(c1.cssClasses.length).toBe(1);
-      expect(c1.cssClasses[0]).toBe('styleClass');
+      expect(c1.cssClasses.length).toBe(2);
+      expect(c1.cssClasses[1]).toBe('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(1);
-      expect(c2.cssClasses[0]).toBe('styleClass');
+      expect(c2.cssClasses.length).toBe(2);
+      expect(c2.cssClasses[1]).toBe('styleClass');
     });
 
     it('should parse two classes with text labels and css class shorthands', () => {
@@ -1744,13 +1746,13 @@ C1 --> C2
 
       const c1 = classDb.getClass('C1');
       expect(c1.label).toBe('Class 1 with text label');
-      expect(c1.cssClasses.length).toBe(1);
-      expect(c1.cssClasses[0]).toBe('styleClass1');
+      expect(c1.cssClasses.length).toBe(2);
+      expect(c1.cssClasses[1]).toBe('styleClass1');
 
       const c2 = classDb.getClass('C2');
       expect(c2.label).toBe('Class 2 !@#$%^&*() label');
-      expect(c2.cssClasses.length).toBe(1);
-      expect(c2.cssClasses[0]).toBe('styleClass2');
+      expect(c2.cssClasses.length).toBe(2);
+      expect(c2.cssClasses[1]).toBe('styleClass2');
     });
 
     it('should parse multiple classes with same text labels', () => {