Css locator giving wrong results

I have in my app

.grey-row:not(:nth-child(-n+6)) {
    background-color: map-get($ws-big-stone, 50);
  }

This works in my app. But in my playwright test, the same query is bringing in diff elements. Why is this?

it('top cells should have grey background', async({ page }) => {
        const el = page.locator('.grey-row:not(:nth-child(-n+6))');
        await expect(el).toHaveCount(11);
                                    
        for (const item of await page.locator('.grey-row:not(:nth-child(-n+6))').all()) {
          await expect(item).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
        }
      });