diff --git a/src/components-examples/cdk-experimental/tree/cdk-tree/cdk-tree-example.css b/src/components-examples/cdk-experimental/tree/cdk-tree/cdk-tree-example.css
index 004c5a8a48c6..8b1e8377f4d0 100644
--- a/src/components-examples/cdk-experimental/tree/cdk-tree/cdk-tree-example.css
+++ b/src/components-examples/cdk-experimental/tree/cdk-tree/cdk-tree-example.css
@@ -24,19 +24,6 @@
   list-style: none;
 }
 
-.example-tree-item[aria-selected='true'] {
-  background-color: var(--mat-sys-inverse-primary);
-}
-
-.example-tree-item[aria-selected='false'] {
-  background-color: var(--mat-sys-background);
-}
-
-.example-tree-item[aria-disabled='true'] {
-  background-color: var(--mat-sys-surface-container);
-  color: var(--mat-sys-on-surface-variant);
-}
-
 .example-tree-item-content {
   display: flex;
   align-items: center;
diff --git a/src/components-examples/cdk-experimental/tree/cdk-tree/cdk-tree-example.ts b/src/components-examples/cdk-experimental/tree/cdk-tree/cdk-tree-example.ts
index a56b82ab957c..c946a291ee37 100644
--- a/src/components-examples/cdk-experimental/tree/cdk-tree/cdk-tree-example.ts
+++ b/src/components-examples/cdk-experimental/tree/cdk-tree/cdk-tree-example.ts
@@ -25,14 +25,14 @@ interface ExampleNode {
   template: `
     <li
       cdkTreeItem
-      class="example-tree-item"
+      class="example-tree-item example-selectable"
       [value]="node().value"
       [label]="node().label || node().value"
       [disabled]="node().disabled"
       #treeItem="cdkTreeItem"
     >
       <span
-        class="example-tree-item-content"
+        class="example-tree-item-content example-stateful"
         [style.paddingLeft.px]="(treeItem.pattern.level() - 1) * 24"
       >
         <mat-icon class="example-tree-item-icon" aria-hidden="true">
diff --git a/src/dev-app/common-classes.css b/src/dev-app/common-classes.css
index 2e2c0c6b5ab1..8efd25a811f1 100644
--- a/src/dev-app/common-classes.css
+++ b/src/dev-app/common-classes.css
@@ -3,6 +3,10 @@
   color: var(--mat-sys-on-surface);
 }
 
+.example-stateful {
+  background-color: color-mix(in srgb, var(--mat-sys-surface) 10%, transparent);
+}
+
 [aria-disabled='true'] .example-stateful,
 .example-stateful[aria-disabled='true'] {
   color: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent);