Claude Code ui

CSS Styles Not Applied, Specificity Issue

A CSS rule was written and is definitely being loaded (visible in dev tools), but it's not applied to elements because a more specific rule is overriding it. This commonly happens after refactoring style organization or adding utility classes.

The style appears in the stylesheet but browsers display the override style instead, confusing developers about what went wrong.

Error Messages You Might See

Style not applied despite being in stylesheet CSS rule crossed out in dev tools (overridden) Unexpected style applied after CSS update
Style not applied despite being in stylesheetCSS rule crossed out in dev tools (overridden)Unexpected style applied after CSS update

Common Causes

  1. Inline styles (style attribute) overriding all CSS rules
  2. !important used in override rule or in original rule creating conflict
  3. Selector specificity too low (element selector beaten by class selector)
  4. CSS order: newer rules loaded after intended rule, causing override
  5. ID selector in override causing extremely high specificity

How to Fix It

Inspect element in dev tools, examine cascade tab to see which rules apply/override. Increase selector specificity without !important if possible. Move your CSS after overriding CSS in load order. Use class selectors instead of element selectors for higher specificity. Avoid inline styles. Reserve !important for utilities only, never for component styles.

Real developers can help you.

Jared Hasson Jared Hasson Full time lead founding dev at a cyber security saas startup, with 10 yoe and a bachelor's in CS. Building & debugging software products is what I've spent my time on for forever Meïr Ankri Meïr Ankri Full-stack developer specializing in React / Next.js / Node.js with 6+ years of experience. I've worked across various sectors including automotive (Reezocar/Société Générale), healthcare (Medical Link SaaS), and e-commerce (Glasman). I build web apps end-to-end, from architecture to production, with a focus on scalability, performance, and code quality. I also mentor junior developers and contribute to technical decisions and code reviews. BurnHavoc BurnHavoc Been around fixing other peoples code for 20 years. Sage Fulcher Sage Fulcher Hey I'm Sage! Im a Boston area software engineer who grew up in South Florida. Ive worked at a ton of cool places like a telehealth kidney care startup that took part in a billion dollar merger (Cricket health/Interwell health), a boutique design agency where I got to work on a ton of exciting startups including a photography education app, a collegiate Esports league and more (Philosophie), a data analytics as a service startup in Cambridge (MA) as well as at Phillips and MIT Lincoln Lab where I designed and developed novel network security visualizations and analytics. I've been writing code and furiously devoted to using computers to make people’s lives easier for about 17 years. My degree is in making computers make pretty lights and sounds. Outside of work I love hip hop, the Celtics, professional wrestling, magic the gathering, photography, drumming, and guitars (both making and playing them) MFox MFox Full-stack professional senior engineer (15+years). Extensive experience in software development, qa, and IP networking. Pratik Pratik SWE with 15+ years of experience building and maintaining web apps and extensive BE infrastructure hanson1014 hanson1014 Full-stack developer experienced in fixing and deploying AI-generated apps from Lovable, Bolt.new, Cursor, and Replit. I specialize in debugging Supabase integration issues (auth flows, RLS policies, database connections), fixing broken deployments, resolving routing/blank screen problems, and cleaning up messy React/Vite codebases. I also build production apps with the Claude API and have shipped a Mac desktop dev tool (Nexterm from scratch. Based in Hong Kong, fast turnaround. rayush33 rayush33 JavaScript (React.js, React Native, Node.js) Developer with demonstrated industry experience of 4+ years, actively looking for opportunities to hone my skills as well as help small-scale business owners with solutions to technical problems Yovel Cohen Yovel Cohen I got a lot of experience in building Long-horizon AI Agents in production, Backend apps that scale to millions of users and frontend knowledge as well. Anthony Akpan Anthony Akpan Developer with 8 years of experience building softwares fro startups

You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.

Get Help

Frequently Asked Questions

What's the CSS specificity order?

Inline > ID > Class/Pseudo-class > Element. Newer rules override older rules if same specificity. Use lowest specificity that works.

When should !important be used?

Almost never in component styles. Only use for utility/override classes (e.g., .hidden { display: none !important; }).

How to debug why a style doesn't apply?

Right-click element → Inspect. Look at Styles tab. Crossed-out rules are overridden. Click the rule to see which file it came from.

Related Claude Code Issues

Can't fix it yourself?
Real developers can help.

You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.

Get Help