Claude made 3 wrong CSS selector attempts on live site before finding correct Tutor LMS selector

Preflight Checklist

• [x] I have searched existing issues for similar behavior reports
• [x] This report does NOT contain sensitive information (API keys, passwords, etc.)

Type of Behavior Issue

Claude made incorrect assumptions about my project

What You Asked Claude to Do

I asked Claude to fix a white gradient "Show More" overlay appearing over course content on a Tutor LMS course page on my live WordPress site. I provided a screenshot showing the white gradient box and asked Claude to make it dark to match the site's dark theme.

What Claude Actually Did

Claude made 3 consecutive wrong attempts, each deployed to the live site:

Attempt 1: Used ::after on .tutor-toggle-more-con — class name does not exist in Tutor LMS, no effect
Attempt 2: Used ::after on .tutor-course-about-desc — wrong element, no effect
Attempt 3: Used ::after on .tutor-toggle-more-collapsed — wrong pseudo-element, Tutor LMS uses ::before

Each failed attempt was deployed to the live site CSS snippet and verified as broken only after the user (not Claude) checked the page. Claude did not inspect the actual Tutor LMS stylesheet to find the real selector before guessing.

Correct answer (found after 3 failures by iterating document.styleSheets in browser JS): .tutor-toggle-more-collapsed::before with a dark gradient background.

Expected Behavior

Before guessing CSS selectors for a third-party plugin, Claude should inspect the actual stylesheet. The browser MCP was available. Claude should have run document.styleSheets iteration in the browser to find rules containing "toggle-more" — this is a one-step operation that immediately returns the exact selector and pseudo-element used by Tutor LMS. Guessing at unknown third-party plugin CSS without inspection is not acceptable, especially on a live site where every wrong attempt is visible to visitors.

Files Affected

WordPress Code Snippets plugin — Snippet 14 (global CSS)
Live production site: marcelmarnix.com
Tutor LMS course page: /courses/work-faster-with-ai-free-starter-course/

Permission Mode

Accept Edits was ON (auto-accepting changes)

Can You Reproduce This?

Haven't tried to reproduce

Steps to Reproduce

1. Have a Tutor LMS course page with a "Show More" overlay (white gradient by default)
2. Ask Claude to override the gradient to match a dark theme
3. Claude guesses .tutor-toggle-more-con::after — does not exist
4. Claude guesses .tutor-course-about-desc::after — wrong element
5. Claude guesses .tutor-toggle-more-collapsed::after — wrong pseudo-element
6. All 3 deployed to live site, visible to visitors, none work
7. Correct selector found only after browser stylesheet inspection

Claude Model

Sonnet

Relevant Conversation

User: [screenshot of white Show More gradient box on dark course page]
Claude: Added `.tutor-toggle-more-con::after` — no effect
User: still not working
Claude: Added `.tutor-course-about-desc::after` — no effect
User: did you really check the page?
Claude: Added `.tutor-toggle-more-collapsed::after` — wrong pseudo-element, no effect

Fix found: Iterated document.styleSheets to find `.tutor-toggle-more-collapsed::before` with `background: linear-gradient(...)`. Changed to `::before` and it worked.

Impact

Medium - Extra work to undo changes

Claude Code Version

claude-sonnet-4-6 (VSCode extension, session date 2026-04-19)

Platform

Anthropic API

Additional Context

• Claude had browser MCP access throughout the session but did not use it to inspect stylesheets before guessing
• The CLAUDE.md global rule "Same fix failing twice = stop and explain" was not followed — Claude made a third attempt instead of diagnosing
• The user explicitly called out "did you really check the page?" after attempt 2, which should have triggered stylesheet inspection
• Each wrong attempt was deployed to the live production CSS and visible to all site visitors
• The correct fix required only one browser_evaluate call: iterate document.styleSheets for rules containing "toggle-more"
• This is one of 5 issues filed from the same session (2026-04-19) on a live production WordPress site