CSS not updating

Why Is My CSS Class Not Applying?

by

CSS class not applying problems usually happen when the class name does not match, the selector is written wrong, the stylesheet is not loading, or another CSS rule overrides the class.

CSS Debugging Fix

Why is my CSS class not applying?

You add a class to an element, write the CSS, refresh the page, and nothing changes. This is one of the most annoying front-end bugs because the code can look correct at a glance. Most of the time, the class is not applying because of a typo, missing dot, wrong selector, stylesheet loading issue, CSS specificity conflict, or a build/cache problem.

Browse CSS Fixes Browse All Fixes
  • Class selector bugs
  • Specificity conflicts
  • Stylesheet loading
  • DevTools debugging

What the bug looks like

You add a class and write CSS for it, but the element keeps the old design, spacing, color, or layout.

Why it happens

The class selector is either not matching, not loading, not winning, or not attached to the element you think it is.

What usually fixes it

Match the class name exactly, use the correct selector, inspect the loaded CSS, and check whether the rule is crossed out.

Error 1

The class name in HTML and CSS does not match

This is the fastest mistake to make and the easiest to miss. CSS class names must match exactly. A missing hyphen or different spelling means the selector never reaches the element.

Broken code

Class mismatch 
<div class="hero-card">
  Premium layout
</div>

.herocard {
  background: #fff5ef;
  border-color: #ffd2c2;
}

Broken visual result

Selector misses
Premium layout

The HTML has hero-card, but the CSS targets .herocard.

Unstyled CTA
The browser cannot apply a class rule that does not match the real class name.

Correct code

Class names match 
<div class="hero-card">
  Premium layout
</div>

.hero-card {
  background: #fff5ef;
  border-color: #ffd2c2;
}

Fixed visual result

Selector matches
Premium layout

The CSS selector now matches the class used in the HTML.

Styled CTA
Once the class name matches exactly, the rule can reach the element.
Error 2

The selector is missing the class dot

In CSS, a class selector needs a dot. Without it, the browser looks for an HTML element with that name instead of a class. This can make a perfectly good class appear ignored.

Broken code

Missing dot 
<button class="cta-button">
  Start fixing
</button>

cta-button {
  background: #ff6a3d;
  color: white;
}

Broken visual result

Browser looks for an element
HTML class: cta-button real
CSS selector: cta-button wrong type
Without the dot, the selector is not targeting a class.

Correct code

Class selector 
<button class="cta-button">
  Start fixing
</button>

.cta-button {
  background: #ff6a3d;
  color: white;
}

Fixed visual result

Class selector works
HTML class: cta-button real
CSS selector: .cta-button matches
The dot tells CSS to target elements with that class.
Error 3

The class applies, but a stronger rule overrides it

Sometimes your class is applying, but you still do not see the expected style because another selector wins. In DevTools, your rule may appear crossed out.

Broken code

Specificity conflict 
.card {
  background: #fff5ef;
}

.page .content .card {
  background: white;
}

Broken visual result

Class rule crossed out
.card background: #fff5ef overridden
.page .content .card background: white wins
The class exists, but a stronger selector controls the final style.

Correct code

Target intentionally 
.content .card {
  background: white;
}

.content .card.is-featured {
  background: #fff5ef;
  border-color: #ffd2c2;
}

Fixed visual result

Intentional selector wins
.content .card base style base
.content .card.is-featured wins
The modifier class is now written to win clearly without random !important.
Error 4

The stylesheet with the class rule is not loading

Your class and selector can both be perfect, but nothing will happen if the CSS file is not loaded on the page. This is common with wrong file paths, stale cache, minified files, or build output that was not regenerated.

Broken code

Missing stylesheet 
<link rel="stylesheet" href="/css/layout.css">

/* But the class lives in: */
components/card.css

.card-feature {
  border-color: #ffd2c2;
}

Broken visual result

Rule never loads
/css/layout.css loaded
components/card.css missing
The browser cannot apply CSS from a file it never downloaded.

Correct code

Load the right file 
<link rel="stylesheet" href="/css/layout.css">
<link rel="stylesheet" href="/css/components/card.css">

.card-feature {
  border-color: #ffd2c2;
}

Fixed visual result

Rule is available
/css/layout.css loaded
/css/components/card.css loaded
Once the stylesheet loads, the class rule becomes available to the page.
Premium pattern

A production-minded CSS class pattern

A stronger class system keeps names consistent, uses readable modifiers, avoids random specificity battles, and makes component states clear.

Premium code

Clear component classes 
<article class="pricing-card pricing-card--featured">
  <h2 class="pricing-card__title">Pro Plan</h2>
  <a class="pricing-card__button" href="#">Start now</a>
</article>

.pricing-card {
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  background: white;
}

.pricing-card--featured {
  border-color: #ffd2c2;
  box-shadow: 0 18px 38px rgba(255,106,61,.12);
}

.pricing-card__button {
  background: #ff6a3d;
  color: white;
}

Premium visual result

Classes describe the component
Pro Plan

The class names are consistent, readable, and connected to the component they style.

Start now
Premium class naming makes debugging easier because the HTML and CSS tell the same story.

Fast practical rule

If a CSS class is not applying, inspect the element in DevTools. First confirm the class exists in the HTML. Then confirm the selector appears in the Styles panel. If it appears crossed out, you have a specificity or order problem. If it does not appear, you have a selector, file, or cache problem.

Debug checklist

  • Check the HTML class name and CSS selector spelling character by character.
  • Make sure class selectors start with a dot, like .card.
  • Inspect the element and confirm the class is really present in the DOM.
  • Check whether your CSS rule appears in DevTools.
  • If the rule is crossed out, check specificity and CSS order.
  • If the rule does not appear, check whether the stylesheet is loaded.
  • Clear cache or rebuild assets if you recently changed the CSS file.
  • Avoid using !important until you know why the class is losing.
Best first move Inspect the element and confirm whether the class exists in the rendered DOM.
Most common cause A tiny mismatch between the HTML class name and the CSS selector.
Most misleading cause The class is applying, but a stronger selector overrides it.
Better mindset A class not applying is not a guessing game. DevTools can show whether the problem is matching, loading, or winning.

Related fixes that can help

If a CSS class is not applying, the surrounding issue may be cache, hover targeting, transition rules, or a stylesheet that is not updating.

Why is my CSS not updating? If the class rule is correct but the page still seems to load the old stylesheet. Read this fix
Why is my hover effect not working? If the class applies, but the hover selector or state does not behave as expected. Read this fix
Why is my CSS transition not working? If the class changes a state, but the visual transition does not animate correctly. Read this fix

Final takeaway

A CSS class not applying usually means one of three things: the selector does not match, the stylesheet is not loading, or another rule is winning. Once you identify which one it is, the fix becomes simple.

Start in DevTools. Confirm the class exists, confirm the rule appears, and confirm whether it is active or crossed out. That gives you a real answer instead of turning the stylesheet into a pile of random overrides.

Want more fixes like this?

Browse more CSS debugging guides or jump to the full FrontFixer library.

CSS Fixes All Fixes

Why Is My CSS Animation Not Playing?

by

A CSS animation usually does not play when the animation name does not match the keyframes, the duration is missing, the element is not receiving the animation rule, or the animation finishes instantly and returns to its starting style.

CSS Animation Fix

Why is my CSS animation not playing?

A CSS animation can fail in a way that feels invisible. You write @keyframes, add an animation name, refresh the page, and nothing moves. Sometimes the animation never starts. Sometimes it plays too fast to notice. Sometimes it plays once and snaps back. Most of the time, the browser is not ignoring your CSS. The animation setup is missing one small but essential piece.

Browse CSS Fixes Browse All Fixes
  • @keyframes bugs
  • Animation name mismatch
  • Duration problems
  • Fill mode issues

What the bug looks like

The element stays still, moves for a split second, jumps back, or seems to ignore the @keyframes block completely.

Why it happens

CSS animations need a matching keyframe name, a duration, a target element, and visible changes between frames.

What usually fixes it

Match the animation name, define duration, verify the selector, use visible keyframes, and add fill mode when the final state should remain.

Error 1

The animation name does not match the keyframes name

This is the first thing to check. CSS animation names are literal. A small typo, different capitalization, or different word is enough to stop the animation from connecting to the keyframes.

Broken code

Name mismatch 
.box {
  animation: slideIn .6s ease;
}

@keyframes slide-in {
  from { transform: translateX(0); }
  to { transform: translateX(120px); }
}

Broken visual result

No matching keyframes
Animation target The element asks for slideIn, but the keyframes are named slide-in.
The animation does not play because the animation name and keyframes name are different.

Correct code

Names match 
.box {
  animation: slideIn .6s ease;
}

@keyframes slideIn {
  from { transform: translateX(0); }
  to { transform: translateX(120px); }
}

Fixed visual result

Keyframes connected
Animation target The animation name now points to the exact keyframes block.
Once the names match, the browser knows which keyframes to run.
Error 2

The animation has no visible duration

An animation needs time. If the duration is missing, zero, or too tiny to notice, the browser may apply the animation instantly. That can look like the animation never played.

Broken code

No duration 
.box {
  animation-name: pulse;
}

@keyframes pulse {
  from { opacity: .4; }
  to { opacity: 1; }
}

Broken visual result

No visible playback time
animation-name: pulse set
animation-duration missing
The browser has a keyframe name, but no real time to show the animation.

Correct code

Duration included 
.box {
  animation-name: pulse;
  animation-duration: .8s;
  animation-timing-function: ease;
}

@keyframes pulse {
  from { opacity: .4; }
  to { opacity: 1; }
}

Fixed visual result

Animation has time
animation-name: pulse set
animation-duration: .8s visible
A real duration gives the browser time to interpolate between keyframe states.
Error 3

The animation plays once and snaps back

Sometimes the animation does play, but the final state disappears immediately after it ends. By default, an element returns to its normal style when the animation finishes.

Broken code

No fill mode 
.box {
  animation: slideIn .6s ease;
}

@keyframes slideIn {
  from { transform: translateX(0); }
  to { transform: translateX(120px); }
}

Broken visual result

Snaps back after ending
Animated box The animation can play, then the element returns to its original non-animated style.
Without fill mode, the end state is not preserved after the animation finishes.

Correct code

Keep final state 
.box {
  animation: slideIn .6s ease forwards;
}

@keyframes slideIn {
  from { transform: translateX(0); }
  to { transform: translateX(120px); }
}

Fixed visual result

Final state remains
Animated box forwards keeps the element at the final keyframe after playback.
Use animation-fill-mode: forwards when the final state should remain visible.
Error 4

The selector never applies the animation to the element

A keyframes block sitting in your stylesheet does nothing by itself. Some element must receive the animation rule. If the selector is wrong, the animation exists but never gets attached to the target.

Broken code

Wrong selector 
<div class="loader-dot"></div>

.loading-dot {
  animation: bounce .8s ease infinite;
}

@keyframes bounce {
  50% { transform: translateY(-12px); }
}

Broken visual result

Rule misses target
HTML class: loader-dot real
CSS selector: .loading-dot misses
The selector is valid CSS, but it does not match the actual element.

Correct code

Selector matches 
<div class="loader-dot"></div>

.loader-dot {
  animation: bounce .8s ease infinite;
}

@keyframes bounce {
  50% { transform: translateY(-12px); }
}

Fixed visual result

Rule reaches target
HTML class: loader-dot real
CSS selector: .loader-dot matches
The keyframes can run because the animation rule is attached to the real element.
Premium pattern

A production-minded CSS animation pattern

A stronger animation setup is explicit. It uses a matching keyframe name, a visible duration, a clear timing function, a final-state decision, and a reduced-motion fallback for users who prefer less movement.

Premium code

Clear animation setup 
.notice {
  animation-name: noticeEnter;
  animation-duration: .55s;
  animation-timing-function: ease;
  animation-fill-mode: both;
}

@keyframes noticeEnter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .notice {
    animation: none;
  }
}

Premium visual result

Predictable animation
Production-ready notice

The animation has a matching name, visible duration, clear start/end states, fill mode, and a reduced-motion fallback.

Premium animation is not just motion. It is clear state management with a respectful fallback.

Fast practical rule

If a CSS animation is not playing, first check whether the element actually has an animation-name in DevTools. Then confirm that the name matches an existing @keyframes block and that the animation has a visible duration.

Debug checklist

  • Confirm the animation-name exactly matches the @keyframes name.
  • Check capitalization, hyphens, and spelling in the animation name.
  • Make sure the animation has a duration longer than zero.
  • Verify that the CSS selector actually matches the target element.
  • Inspect the element in DevTools to see whether the animation rule is active or crossed out.
  • Make sure the keyframes create a visible difference between states.
  • Use animation-fill-mode: forwards or both when the final state should remain.
  • Check whether prefers-reduced-motion or another rule disables the animation.
  • If the CSS change does not appear at all, check cache and stylesheet loading.
Best first move Inspect the target element and confirm the browser sees an active animation rule.
Most common cause The animation name and the @keyframes name do not match exactly.
Most invisible cause The animation technically runs, but the start and end states look almost the same.
Better mindset Keyframes describe motion, but the element still needs a valid animation rule to run them.

Related fixes that can help

If your animation is not playing, the real cause may be CSS not updating, a transition misunderstanding, or a hover state that never triggers.

Why is my CSS transition not working? If you are mixing up transitions and animations or expecting a state change to animate automatically. Read this fix
Why is my hover effect not working? If the animation is supposed to start on hover, but the hover state itself is not firing. Read this fix
Why is my CSS not updating? If you added animation code but the page still loads the old stylesheet. Read this fix

Final takeaway

A CSS animation not playing usually has a simple reason: the keyframes name does not match, the duration is missing, the selector misses the element, or the animation runs but does not create a visible change.

Start by proving the animation rule is active on the element. Then check the keyframes name, duration, visible frame changes, and fill mode. Once those pieces line up, the animation becomes much easier to debug.

Want more fixes like this?

Browse more CSS motion and interaction debugging guides in the FrontFixer library.

CSS Fixes All Fixes

Why Is My CSS Not Updating After I Change It?

by

CSS not updating after you change it usually means the browser is still reading an old file, a different stylesheet, or a stronger CSS rule than the one you just edited.

CSS Debugging Fix

Why is my CSS not updating after I change it?

You change the CSS, save the file, refresh the page, and nothing happens. The button keeps the old color. The card still has the old spacing. The mobile layout still looks broken. In most real projects, the problem is not that CSS is ignoring you. The problem is usually cache, file order, specificity, the wrong stylesheet, minified assets, or a build process that has not generated the new file yet.

Browse CSS Fixes Browse All Fixes
  • CSS cache
  • Wrong stylesheet
  • Specificity conflicts
  • WordPress debugging

What the bug looks like

You change a color, margin, font size, layout rule, or mobile style, but the visible page keeps showing the old design.

Why it happens

The page is either loading old CSS, loading a different CSS file, or applying a stronger rule after your new rule.

What usually fixes it

Hard refresh, clear cache, confirm the loaded file in DevTools, inspect the rule, then fix specificity, order, or the build pipeline.

Error 1

The browser is still loading the cached stylesheet

This is the classic reason CSS changes do not show. You saved the file, but the browser already has an older version stored. So the code is changed on the server, while your screen still shows yesterday’s CSS.

Broken code

Old cached file 
<link rel="stylesheet" href="/assets/style.css">

/* You changed this today */
.hero-card {
  border-radius: 24px;
  background: white;
}

Broken visual result

Old CSS still visible
Old header style
Old card shape The page still looks like the previous version because the cached file is being used.
The CSS file was changed, but the browser did not request a fresh copy.

Correct code

Cache-busted file 
<link rel="stylesheet"
      href="/assets/style.css?v=2026-06-06">

/* New version now reaches the browser */
.hero-card {
  border-radius: 24px;
  background: white;
}

Fixed visual result

Fresh CSS loaded
Updated header style
New card shape The browser now loads the newer file, so the visual update finally appears.
Versioning the file URL forces the browser to request the updated stylesheet.
Error 2

A stronger selector overrides the CSS you changed

Sometimes the CSS is updating, but your rule is losing. In DevTools, the new property may appear crossed out because a more specific selector, inline style, or later rule is winning the cascade.

Broken code

Weak selector loses 
.button {
  background: #ff6a3d;
}

/* Later or stronger rule */
.header .button {
  background: #0f172a;
}

Broken visual result

New rule crossed out
.button background: #ff6a3d overridden
.header .button background: #0f172a wins
The file updated, but the rule you edited is not the rule controlling the final button style.

Correct code

Target the real selector 
.header .button {
  background: #ff6a3d;
}

.header .button:hover {
  background: #eb5628;
}

Fixed visual result

Correct rule wins
.header .button background: #ff6a3d active
.header .button:hover background: #eb5628 ready
The update works because the rule now matches the selector that actually controls the element.
Error 3

You edited a file the page is not loading

This one feels ridiculous until it happens. The CSS file you edited may not be the CSS file loaded by the page. WordPress themes, child themes, page builders, minified assets, and build tools can all create this confusion.

Broken code

Wrong file edited 
/* You edited this file */
themes/frontfixer/style.css

.card {
  padding: 28px;
}

/* But the page actually loads */
uploads/cache/minified-style.css

Broken visual result

Wrong source file
themes/frontfixer/style.css edited
uploads/cache/minified-style.css loaded
Your code changed, but not in the file that the browser is currently using.

Correct code

Confirm loaded source 
/* In DevTools, check the rule source */
.card {
  padding: 28px;
}

/* Then edit the real source or purge/rebuild */
Loaded file:
style.css?ver=2026-06-06

Fixed visual result

Right file confirmed
style.css?ver=2026-06-06 loaded
.card padding: 28px active
DevTools tells you the exact stylesheet and line where the winning rule is coming from.
Error 4

WordPress cache or optimization is serving old CSS

In WordPress, your CSS may be correct but still not visible because an optimization plugin, server cache, CDN cache, or minified file is serving an older generated version. This is common after editing Custom CSS, theme files, or page-level HTML/CSS.

Broken setup

Old optimized CSS 
Original CSS changed:
.card {
  border-radius: 24px;
}

/* But the front-end still loads */
combined.min.css
cached by plugin/CDN/server

Broken visual result

Optimized file is stale
Cached version
Old minified CSS The page is still using a generated file that has not been refreshed.
Clearing only the browser cache may not be enough if the server or plugin is serving old CSS.

Correct workflow

Purge and rebuild 
After editing CSS:

1. Save the post/theme/CSS file
2. Purge plugin cache
3. Purge server/CDN cache if used
4. Regenerate/minify CSS if needed
5. Hard refresh the browser

Fixed visual result

Fresh optimized CSS
Updated version
New generated file The optimized CSS has been rebuilt, so the live page finally matches your edit.
For WordPress sites, always think in layers: browser cache, plugin cache, server cache, CDN cache.
Premium pattern

A production-minded CSS update workflow

The stronger fix is not just refreshing harder. A reliable workflow makes CSS updates predictable: version your stylesheet, inspect the winning rule, avoid random specificity wars, and use a clear cache purge routine after important changes.

Premium workflow

Predictable updates 
<link rel="stylesheet"
      href="/assets/style.css?v=2026-06-06">

/* Keep selectors intentional */
.ffx-card {
  padding: clamp(18px, 3vw, 28px);
  border-radius: 24px;
}

/* Avoid random emergency overrides */
.ffx-card.is-featured {
  border-color: #ffd2c2;
  box-shadow: 0 18px 38px rgba(255,106,61,.12);
}

/* After deploying:
   hard refresh, inspect source,
   purge cache, then request indexing
   for important updated pages. */

Premium visual result

Clean update path
Production-ready CSS
Predictable visual update The stylesheet is versioned, the selector is intentional, and the cache workflow is clear.
The premium version does not rely on panic-refreshing. It makes the CSS pipeline easier to trust.

Fast practical rule

If CSS is not updating, do not immediately add !important. First check whether the browser is loading the new file at all. Then inspect the exact rule in DevTools. If the file is old, fix cache. If the rule is crossed out, fix specificity or order.

Debug checklist

  • Hard refresh the page with the browser cache bypassed.
  • Open DevTools and confirm the stylesheet URL actually changed or loaded fresh.
  • Inspect the element and check whether your rule is active or crossed out.
  • Confirm you edited the stylesheet that the page is really loading.
  • Check whether a later rule overrides your new rule.
  • Check selector specificity before using !important.
  • Clear WordPress plugin cache, server cache, CDN cache, and minified CSS when relevant.
  • If your project uses a build process, rebuild the compiled CSS file.
  • Test in an incognito window or another browser to separate browser cache from server cache.
Best first move Inspect the element in DevTools and check whether your new rule appears at all.
Most common cause Browser, plugin, CDN, or server cache is still serving an older CSS file.
Most misleading cause The CSS changed, but another selector is stronger, so the visual result stays the same.
Better mindset CSS debugging is not guessing. It is proving which file loaded and which rule won.

Related fixes that can help

If your CSS change appears saved but the layout still looks wrong, the real cause may be a media query, responsive structure, overflow, or selector problem.

Why is my media query not working? If mobile CSS changes do not appear or your breakpoint seems ignored. Read this fix
Why is my responsive design not working? If the CSS updates, but the page still behaves like a desktop layout. Read this fix
Horizontal scroll on mobile? If your CSS change creates or fails to fix sideways scrolling on small screens. Read this fix

Final takeaway

CSS not updating is usually not a mystery. The page is either loading an old stylesheet, loading a different stylesheet, or applying a different rule than the one you edited. Once you separate those three possibilities, the bug becomes much easier to fix.

Start with DevTools. Confirm the file. Confirm the selector. Confirm the winning rule. Then clear or rebuild the cache only where needed. That is faster than stacking random overrides until the stylesheet becomes harder to maintain.

Want more fixes like this?

Browse more CSS debugging guides or jump to the full FrontFixer library.

CSS Fixes All Fixes