diff --git a/packages/trace-viewer/src/snapshotRenderer.ts b/packages/trace-viewer/src/snapshotRenderer.ts
index 9092d97e8c..730cab4d19 100644
--- a/packages/trace-viewer/src/snapshotRenderer.ts
+++ b/packages/trace-viewer/src/snapshotRenderer.ts
@@ -53,12 +53,11 @@ export class SnapshotRenderer {
     const visit = (n: NodeSnapshot, snapshotIndex: number, parentTag: string | undefined, parentAttrs: [string, string][] | undefined): string => {
       // Text node.
       if (typeof n === 'string') {
-        const text = escapeText(n);
         // Best-effort Electron support: rewrite custom protocol in url() links in stylesheets.
         // Old snapshotter was sending lower-case.
         if (parentTag === 'STYLE' || parentTag === 'style')
-          return rewriteURLsInStyleSheetForCustomProtocol(text);
-        return text;
+          return rewriteURLsInStyleSheetForCustomProtocol(n);
+        return escapeText(n);
       }
 
       if (!(n as any)._string) {
diff --git a/tests/library/trace-viewer.spec.ts b/tests/library/trace-viewer.spec.ts
index 0f7feb365c..a18526b09e 100644
--- a/tests/library/trace-viewer.spec.ts
+++ b/tests/library/trace-viewer.spec.ts
@@ -429,6 +429,32 @@ test('should work with adopted style sheets and all: unset', async ({ page, runA
   }
 });
 
+test('should work with nesting CSS selectors', async ({ page, runAndTrace }) => {
+  test.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/31607' });
+
+  const traceViewer = await runAndTrace(async () => {
+    await page.setContent(`
+      <span class="foo" data-testid="green-element">Hi</span>
+      <span class="foo bar" data-testid="red-element">Hello</span>
+      <style>
+        .foo {
+          color: green;
+
+          &.bar {
+            color: red;
+          }
+        }
+      </style>
+      `);
+    await page.evaluate(() => { });
+  });
+  {
+    const frame = await traceViewer.snapshotFrame('page.evaluate', 0);
+    await expect(frame.getByTestId('green-element')).toHaveCSS('color', /* green */'rgb(0, 128, 0)');
+    await expect(frame.getByTestId('red-element')).toHaveCSS('color', /* red */'rgb(255, 0, 0)');
+  }
+});
+
 test('should restore scroll positions', async ({ page, runAndTrace }) => {
   const traceViewer = await runAndTrace(async () => {
     await page.setContent(`