CSS Cascade and Specificity Problems Guide

Introduction

CSS can feel confusing when a style does not apply as expected.

You write a rule like this:

1.title {2  color: blue;3}

But the page still shows the title in red.

Or you write:

1.button {2  background-color: green;3}

But the button stays gray.

When this happens, CSS is not choosing styles randomly.

The browser is following the cascade.

The cascade is the system CSS uses to decide which declaration wins when more than one declaration could apply to the same element and property.

Specificity is one part of that system.

Source order is another part.

Inheritance, browser defaults, cascade layers, !important, media queries, and inline styles can also affect the result.

This guide explains common cascade and specificity problems and how to debug styles that do not apply as expected.

The Basic Problem

Suppose you have this HTML:

1<p class=”intro”>Welcome to the page.</p>

And this CSS:

1p {2  color: black;3}4 5.intro {6  color: navy;7}

Both rules apply to the paragraph.

The p selector applies because the element is a paragraph.

The .intro selector applies because the paragraph has class="intro".

Both rules set the same property:

1color

The browser must choose one value.

The paragraph becomes navy.

Why?

Because .intro is more specific than p.

This is a normal specificity conflict.

What the Cascade Decides

The cascade decides which CSS declaration wins.

A declaration is a property and value pair.

Example:

1color: navy;

A rule can contain several declarations:

1.card {2  color: navy;3  padding: 1rem;4  background-color: white;5}

The cascade works declaration by declaration.

It does not simply choose one whole rule and ignore the other whole rule.

Example:

1.card {2  color: black;3  padding: 1rem;4}5 6.card {7  color: blue;8}

The final styles are:

1color: blue;2padding: 1rem;

The later rule overrides color.

The earlier rule still provides padding.

This is important when debugging.

A crossed-out declaration in developer tools does not mean the whole CSS rule failed.

It usually means that one declaration lost to another declaration.

A Simple Cascade Order

A simplified version of the cascade is:

1importance2cascade layers3specificity4source order

There are more details in the full CSS cascade, but this simplified order explains many everyday problems.

In practical terms, ask:

1Is one declaration marked !important?2Are cascade layers involved?3Which selector is more specific?4If specificity is equal, which declaration comes later?

You should also check:

1Does the selector actually match the element?2Is the rule inside a media query that applies?3Is the property inherited instead of directly applied?4Is there an inline style?5Is a browser default involved?

Problem 1: The Selector Does Not Match the Element

Before thinking about specificity, first check whether your selector matches the element at all.

HTML:

1<p class=”intro”>Welcome.</p>

CSS:

1.introduction {2  color: blue;3}

This rule does not apply.

Why?

The HTML has:

1class=”intro”

But the CSS selects:

1.introduction

Those are different class names.

The browser will not guess what you meant.

Debugging a Selector That Does Not Match

Check spelling carefully.

This does not match:

1<div class=”card-title”>Title</div>

1.card_title {2  color: navy;3}

The HTML uses a hyphen:

1card-title

The CSS uses an underscore:

1card_title

Those are different.

Also check whether you used the right selector type.

This selects a class:

1.title {2  color: navy;3}

This selects an ID:

1#title {2  color: navy;3}

This selects an element:

1title {2  color: navy;3}

These are not the same.

Problem 2: The Selector Is Too Broad

Sometimes your selector works, but it affects more elements than expected.

Example:

1.title {2  color: blue;3}

HTML:

1<article class=”post”>2  <h2 class=”title”>Post title</h2>3</article>4 5<section class=”card”>6  <h2 class=”title”>Card title</h2>7</section>

Both titles become blue.

If you only wanted card titles to change, the selector was too broad.

A more focused selector is:

1.card .title {2  color: blue;3}

Or use a more specific class name:

1.card-title {2  color: blue;3}

Problem 3: Another Rule Is More Specific

This is one of the most common problems.

CSS:

1.title {2  color: blue;3}4 5.card .title {6  color: red;7}

HTML:

1<div class=”card”>2  <h2 class=”title”>Card title</h2>3</div>

The title becomes red.

Why?

Both selectors match the heading.

But .card .title is more specific than .title.

The selector .card .title contains two class selectors.

The selector .title contains one class selector.

So .card .title wins.

Specificity Basics

A simplified specificity order is:

1type selector2class selector3ID selector4inline style

From weaker to stronger:

1p {2  color: black;3}

1.intro {2  color: navy;3}

1#main-intro {2  color: green;3}

1<p style=”color: red;”>Text</p>

In general:

1class selectors beat type selectors2ID selectors beat class selectors3inline styles beat normal stylesheet rules

This is simplified, but it is useful for most beginner CSS problems.

Specificity Score

Specificity is often described with a score.

A common format is:

1IDs – classes/attributes/pseudo-classes – types/pseudo-elements

Example:

1p

Specificity:

10-0-1

Example:

1.intro

Specificity:

10-1-0

Example:

1#main-title

Specificity:

11-0-0

Example:

1.card p

Specificity:

10-1-1

Example:

1#main-content .card p

Specificity:

11-1-1

The leftmost column matters most.

An ID selector usually beats many class or type selectors because the ID column is stronger.

Problem 4: You Expected Source Order to Win, but Specificity Won

Source order means later rules can win when specificity is equal.

But source order does not automatically beat specificity.

Example:

1.intro {2  color: navy;3}4 5p {6  color: black;7}

HTML:

1<p class=”intro”>Welcome.</p>

The paragraph becomes navy.

Why?

The p rule comes later.

But .intro is more specific.

A later weaker rule does not beat an earlier stronger rule.

When Source Order Wins

Source order wins when competing declarations have equal specificity.

Example:

1.message {2  color: green;3}4 5.message {6  color: blue;7}

HTML:

1<p class=”message”>Saved.</p>

The paragraph becomes blue.

Both selectors are the same.

Both set color.

The later declaration wins.

Another example:

1.success {2  color: green;3}4 5.warning {6  color: orange;7}

HTML:

1<p class=”success warning”>Check your email.</p>

The paragraph becomes orange.

Both .success and .warning have equal specificity.

Both apply to the paragraph.

.warning appears later in the CSS.

So .warning wins.

Problem 5: The HTML Class Order Does Not Control the Winner

This is a common beginner mistake.

HTML:

1<p class=”success warning”>Message</p>

Some people expect .warning to win because it appears last in the HTML class attribute.

But class order in HTML does not decide the winner.

CSS order decides.

Example:

1.warning {2  color: orange;3}4 5.success {6  color: green;7}

HTML:

1<p class=”success warning”>Message</p>

The paragraph becomes green.

Why?

The .success rule appears later in the CSS.

This version gives the same result:

1<p class=”warning success”>Message</p>

The class order in HTML does not matter for this conflict.

The CSS rule order matters.

Problem 6: Inline Styles Are Winning

Inline styles are written directly on an HTML element.

Example:

1<p class=”intro” style=”color: red;”>2  Welcome.3</p>

CSS:

1.intro {2  color: blue;3}

The paragraph becomes red.

Why?

The inline style is stronger than the normal class rule.

This is why inline styles can be difficult to override.

They are useful in rare cases, but they often make CSS harder to maintain.

Overriding Inline Styles

A normal stylesheet rule usually does not override an inline style:

1.intro {2  color: blue;3}

But an important stylesheet rule can override a normal inline style:

1.intro {2  color: blue !important;3}

HTML:

1<p class=”intro” style=”color: red;”>2  Welcome.3</p>

The paragraph becomes blue.

Use this carefully.

If you control the HTML, it is usually better to remove the inline style.

Problem 7: !important Is Blocking Your Rule

The !important flag makes a declaration harder to override.

Example:

1.alert {2  color: red !important;3}4 5.alert {6  color: black;7}

HTML:

1<p class=”alert”>Important message.</p>

The paragraph stays red.

The later black declaration is normal.

The earlier red declaration is important.

Important declarations beat normal declarations.

Important Does Not Always Win Against Important

If both declarations are important, specificity still matters.

Example:

1.alert {2  color: red !important;3}4 5.warning.alert {6  color: orange !important;7}

HTML:

1<p class=”alert warning”>Warning message.</p>

The paragraph becomes orange.

Both declarations are important.

.warning.alert is more specific than .alert.

So orange wins.

If specificity is equal, source order decides between important declarations:

1.alert {2  color: red !important;3}4 5.alert {6  color: orange !important;7}

The paragraph becomes orange.

Debugging !important

When a style does not apply, check developer tools for !important.

If the winning declaration has !important, your normal rule will not beat it.

You have several options:

1remove the unnecessary !important2use a better cascade structure3use a more specific important rule4move the rule into a stronger cascade layer if layers are involved5avoid fighting the rule if it is a deliberate utility or state class

Do not automatically add more !important.

That can create a chain where every future override also needs !important.

Problem 8: The Property Is Inherited, Not Directly Applied

Inheritance can make debugging confusing.

Example:

1.card {2  color: green;3}4 5p {6  color: blue;7}

HTML:

1<div class=”card”>2  <p>This paragraph is blue.</p>3</div>

The paragraph is blue.

Why?

The .card rule sets the colour on the parent.

The paragraph could inherit green from the parent.

But the paragraph also has a direct rule:

1p {2  color: blue;3}

A direct value on the element beats an inherited value from the parent.

Parent Specificity Does Not Transfer to Children

This surprises many people.

CSS:

1#main {2  color: green;3}4 5p {6  color: blue;7}

HTML:

1<div id=”main”>2  <p>This paragraph is blue.</p>3</div>

The paragraph becomes blue.

The #main selector is more specific than p.

But #main targets the parent <div>, not the paragraph.

The p selector targets the paragraph directly.

The paragraph receives:

1inherited color: green2direct color: blue

The direct colour wins.

Specificity from the parent does not transfer to inherited child values.

Problem 9: You Expected a Property to Inherit, but It Does Not

Not every CSS property inherits.

Text-related properties often inherit:

1color2font-family3font-size4font-style5font-weight6line-height7letter-spacing8text-align9text-transform10visibility

Box and layout properties usually do not inherit:

1margin2padding3border4background5width6height7display8position9gap10grid-template-columns11flex-direction

Example:

1.card {2  padding: 2rem;3}

HTML:

1<div class=”card”>2  <p>Card text.</p>3</div>

The paragraph does not inherit padding: 2rem.

The card has padding.

The paragraph sits inside the padded card.

If you want the paragraph itself to have padding, you must style the paragraph directly:

1.card p {2  padding: 2rem;3}

Problem 10: Browser Defaults Are Applying

Browsers have default styles.

For example, browsers usually give headings a large bold font, paragraphs margins, links blue underlined styling, and lists indentation.

Example:

1<h1>Page title</h1>2<p>Paragraph text.</p>3<a href=”/about”>About</a>

Even with no CSS, these elements have visible styles.

Those styles come from the browser’s user agent stylesheet.

This can confuse debugging because a style may appear even though you did not write it.

Browser Default Example

CSS:

1body {2  font-size: 18px;3}

HTML:

1<h1>Page title</h1>2<p>Paragraph text.</p>

The paragraph may use 18px.

The heading may still appear much larger.

Why?

The heading has browser default styles.

The browser likely gives h1 a direct font size.

That direct browser rule can override inherited font-size from body.

If you want control, write a direct heading rule:

1h1 {2  font-size: 2rem;3}

Problem 11: A Reset Removed Default Styles

Many projects use a reset.

Example:

1h1,2h2,3p,4ul {5  margin: 0;6}

This removes default margins from headings, paragraphs, and lists.

If you expect paragraphs to have spacing, but they do not, a reset may be responsible.

Add your own spacing:

1p {2  margin-bottom: 1rem;3}

Or for article content:

1.article p {2  margin-block: 1rem;3}

A reset is not a bug.

It just means you are responsible for adding the styles you want.

Problem 12: A Shorthand Property Overrode a Longhand Property

Shorthand properties can override multiple related longhand properties.

Example:

1.box {2  margin-top: 2rem;3}4 5.box {6  margin: 0;7}

The final top margin is 0.

Why?

The shorthand property margin sets all four sides:

1margin-top2margin-right3margin-bottom4margin-left

So margin: 0; overrides the earlier margin-top: 2rem;.

Now reverse the order:

1.box {2  margin: 0;3}4 5.box {6  margin-top: 2rem;7}

The final top margin is 2rem.

The later longhand overrides one part of the earlier shorthand.

Shorthand Border Example

CSS:

1.card {2  border-color: blue;3}4 5.card {6  border: 1px solid gray;7}

The final border colour is gray.

Why?

The border shorthand sets:

1border-width2border-style3border-color

Because it comes later, it overrides the earlier border-color.

Reverse the order:

1.card {2  border: 1px solid gray;3}4 5.card {6  border-color: blue;7}

Now the border colour is blue.

When debugging, look for shorthand properties that silently reset longhand values.

Problem 13: The Rule Is Inside a Media Query That Does Not Apply

Media queries apply only when their condition is true.

Example:

1.card {2  width: 100%;3}4 5@media (min-width: 900px) {6  .card {7    width: 50%;8  }9}

If the viewport is 700px wide, the media query does not apply.

The card remains 100%.

If the viewport is 950px wide, the media query applies.

The card becomes 50%.

When a style does not apply, check whether it is inside a media query.

Media Query Order Problems

Multiple media queries can apply at the same time.

Example:

1.box {2  width: 100%;3}4 5@media (min-width: 900px) {6  .box {7    width: 50%;8  }9}10 11@media (min-width: 600px) {12  .box {13    width: 75%;14  }15}

At 950px, both media queries apply.

The 900px rule says 50%.

The 600px rule says 75%.

The 600px rule comes later.

If specificity is equal, the later rule wins.

The box becomes 75%.

That may be unexpected.

A common mobile-first order is:

1.box {2  width: 100%;3}4 5@media (min-width: 600px) {6  .box {7    width: 75%;8  }9}10 11@media (min-width: 900px) {12  .box {13    width: 50%;14  }15}

Now larger breakpoint rules come later.

Problem 14: The File Order Is Wrong

Source order also applies across CSS files.

HTML:

1<link rel=”stylesheet” href=”theme.css”>2<link rel=”stylesheet” href=”base.css”>

If both files style the same thing, base.css can override theme.css because it is loaded later.

Example:

theme.css:

1button {2  background-color: blue;3}

base.css:

1button {2  background-color: gray;3}

The button becomes gray.

If you expected the theme to win, load it later:

1<link rel=”stylesheet” href=”base.css”>2<link rel=”stylesheet” href=”theme.css”>

Problem 15: A Cascade Layer Is Winning

Cascade layers are created with @layer.

Example:

1@layer base, components, utilities;2 3@layer base {4  .title {5    color: black;6  }7}8 9@layer utilities {10  .text-blue {11    color: blue;12  }13}

HTML:

1<h2 class=”title text-blue”>Heading</h2>

The heading becomes blue.

The utilities layer comes after the base layer.

For normal declarations, later layers have higher priority.

Layer order is considered before specificity.

Layer Order Can Beat Specificity

Example:

1@layer base, utilities;2 3@layer base {4  #main .card .title {5    color: red;6  }7}8 9@layer utilities {10  .text-blue {11    color: blue;12  }13}

HTML:

1<div id=”main”>2  <div class=”card”>3    <h2 class=”title text-blue”>Title</h2>4  </div>5</div>

The title becomes blue.

Why?

The base selector is more specific.

But utilities is a later layer.

For normal declarations, later layers beat earlier layers before specificity is compared.

If layers are involved, check the layer order before blaming specificity.

Problem 16: Unlayered CSS Is Overriding Layered CSS

This can surprise people.

CSS:

1@layer components {2  .card p {3    color: navy;4  }5}6 7p {8  color: black;9}

HTML:

1<div class=”card”>2  <p>This paragraph is black.</p>3</div>

The paragraph becomes black.

Why?

The p rule is unlayered.

For normal author styles, unlayered CSS has higher priority than layered CSS.

If you are using cascade layers, be careful with unlayered rules.

A better version may be:

1@layer base {2  p {3    color: black;4  }5}6 7@layer components {8  .card p {9    color: navy;10  }11}

Now the component layer can override the base layer.

Problem 17: The Element Is Outside the Scope

If you use @scope, selectors inside the scope only apply within the scope root.

Example:

1@scope (.card) {2  .title {3    color: navy;4  }5}

HTML:

1<div class=”card”>2  <h2 class=”title”>Card title</h2>3</div>4 5<div class=”modal”>6  <h2 class=”title”>Modal title</h2>7</div>

Only the card title becomes navy.

The modal title is outside .card.

So the scoped rule does not apply.

When debugging scoped CSS, check whether the element is actually inside the scope root.

Problem 18: A Scope Limit Excludes the Element

@scope can have a lower boundary.

Example:

1@scope (.article) to (.callout) {2  p {3    color: #333333;4  }5}

HTML:

1<article class=”article”>2  <p>Main paragraph.</p>3 4  <aside class=”callout”>5    <p>Callout paragraph.</p>6  </aside>7</article>

The main paragraph is styled.

The callout paragraph is not styled by this scoped rule.

Why?

.callout is the scope limit.

The scoped rule stops before entering it.

If a scoped rule does not apply, check whether a scope limit excludes the element.

Problem 19: The Pseudo-Class State Is Not Active

Pseudo-classes apply only in certain states.

Example:

1button:hover {2  background-color: blue;3}

This rule applies when the button is hovered.

If the button is not hovered, the rule does not apply.

Another example:

1input:focus {2  border-color: blue;3}

This applies when the input has focus.

If the input is not focused, the rule does not apply.

When debugging pseudo-classes, check whether the state is active.

Browser developer tools can often force states like :hover, :focus, and :active.

Problem 20: Link State Order Is Causing Conflicts

Links have several states:

1a:link2a:visited3a:hover4a:focus5a:active

Some states can overlap.

Example:

1a:hover {2  color: red;3}4 5a:focus {6  color: blue;7}

If a link is both hovered and focused, both rules may apply.

If specificity is equal, the later rule wins.

So the link may become blue.

A clear pattern is:

1a:link {2  color: blue;3}4 5a:visited {6  color: purple;7}8 9a:hover,10a:focus-visible {11  text-decoration: underline;12}13 14a:active {15  color: red;16}

Think about overlapping states when debugging link styles.

Problem 21: A Pseudo-Element Is Not Being Created

Pseudo-elements like ::before and ::after often need content.

Example:

1.note::before {2  content: “Note: “;3  font-weight: bold;4}

If you forget content, the pseudo-element may not appear:

1.note::before {2  font-weight: bold;3}

The rule exists, but there may be no generated content to show.

Add content:

1.note::before {2  content: “Note: “;3}

Also check whether the selected element can use the pseudo-element as expected.

Problem 22: The Property Does Not Apply to That Element

Some properties only work in certain contexts.

Example:

1.item {2  justify-self: center;3}

This works on grid items.

But if the parent is not a grid container, the result may not be what you expect.

Example:

1.parent {2  display: block;3}4 5.item {6  justify-self: center;7}

The justify-self declaration may not affect layout as expected.

Another example:

1span {2  width: 200px;3}

A normal inline <span> does not behave like a block box.

The width may not apply as expected.

You may need:

1span {2  display: inline-block;3  width: 200px;4}

When a declaration appears active but has no visible effect, check whether the property applies in that layout context.

Problem 23: The Parent Layout Controls the Child

Some styles affect children without being inherited.

Example:

1.container {2  display: flex;3}

HTML:

1<div class=”container”>2  <div class=”item”>One</div>3  <div class=”item”>Two</div>4</div>

The children become flex items.

But they do not inherit display: flex.

The parent creates a flex formatting context.

The children participate in that layout.

If child layout is not behaving as expected, inspect the parent.

Look for:

1display: flex2display: grid3position4overflow5align-items6justify-content7grid-template-columns8gap

The issue may be on the parent, not the child.

Problem 24: display: none on a Parent Hides Everything

If a parent has display: none, its children are not displayed.

Example:

1.modal {2  display: none;3}4 5.modal .message {6  display: block;7}

HTML:

1<div class=”modal”>2  <p class=”message”>Hello.</p>3</div>

The message does not appear.

Why?

The parent .modal is not displayed.

Setting the child to display: block does not make it visible while the parent is display: none.

You must display the parent:

1.modal.is-open {2  display: block;3}

Problem 25: opacity on a Parent Affects Children Visually

The opacity property does not inherit in the normal way.

But it affects the rendered element and its contents.

Example:

1.card {2  opacity: 0.5;3}4 5.card p {6  opacity: 1;7}

HTML:

1<div class=”card”>2  <p>Card text.</p>3</div>

The paragraph still appears faded.

Why?

The whole card is rendered at 0.5 opacity.

The child cannot escape the parent’s rendered opacity.

If you only want a faded background, use a background colour with alpha instead:

1.card {2  background-color: rgb(0 0 0 / 0.5);3}

instead of fading the whole card.

Problem 26: z-index Does Not Work as Expected

z-index only works in certain positioning and stacking contexts.

Example:

1.box {2  z-index: 10;3}

If .box is not positioned or not in a relevant stacking context, z-index may not behave as expected.

Often you need:

1.box {2  position: relative;3  z-index: 10;4}

But stacking contexts can also be created by properties such as:

1position with z-index2opacity less than 13transform4filter5isolation6certain contain values

If z-index is not working, inspect the stacking context.

The problem may not be the number.

A z-index: 9999 inside a lower stacking context can still appear behind something in a higher stacking context.

Problem 27: A Custom Property Is Not Defined Where You Use It

CSS custom properties inherit.

Example:

1.card {2  –brand-color: blue;3}4 5.card h2 {6  color: var(–brand-color);7}

This works because --brand-color is defined on .card and inherited by the heading.

But this may fail:

1.card h2 {2  color: var(–brand-color);3}

If --brand-color is not defined anywhere in the heading’s inheritance path, the property may become invalid.

Use a fallback:

1.card h2 {2  color: var(–brand-color, navy);3}

Now the heading uses navy if --brand-color is missing.

Problem 28: A Custom Property Value Is Invalid

Custom properties are substituted later.

Example:

1:root {2  –spacing: blue;3}4 5.card {6  padding: var(–spacing);7}

This does not make sense.

padding needs a length or valid spacing value.

blue is not valid for padding.

The declaration becomes invalid when used.

Use valid values:

1:root {2  –spacing: 1rem;3}4 5.card {6  padding: var(–spacing);7}

If a custom property-based style does not apply, check both where the variable is defined and whether the value is valid for the property.

Problem 29: The CSS Has a Syntax Error

A missing brace or semicolon can make later CSS behave strangely.

Example:

1.card {2  color: navy;3  padding: 1rem;4 5.button {6  background-color: blue;7}

The .card rule is missing a closing brace:

1}

The browser may parse the following CSS differently than you expect.

Correct:

1.card {2  color: navy;3  padding: 1rem;4}5 6.button {7  background-color: blue;8}

When styles stop applying after a certain point in a file, check for syntax errors above that point.

Problem 30: Invalid Values Are Ignored

If a property has an invalid value, the browser ignores that declaration.

Example:

1.card {2  color: 20px;3}

20px is not a valid value for color.

The declaration is ignored.

Another example:

1.box {2  display: centre;3}

The valid value is not centre.

The browser ignores the invalid declaration.

Correct:

1.box {2  text-align: center;3}

or:

1.box {2  display: flex;3  justify-content: center;4}

depending on what you are trying to do.

Problem 31: The Stylesheet Is Not Loading

Sometimes the CSS rule is fine, but the file is not loaded.

HTML:

1<link rel=”stylesheet” href=”style.css”>

Check:

1Is the file path correct?2Is the file name correct?3Is the file extension correct?4Is the server returning the file?5Is the CSS cached?6Is the link tag in the document?

If the file is named:

1styles.css

but the HTML links to:

1style.css

the stylesheet will not load.

Use browser developer tools to check the Network panel if needed.

Problem 32: Browser Cache Is Showing Old CSS

Sometimes you change CSS, but the browser still shows an old version.

Try:

1hard refresh2disable cache in developer tools3check whether your build process generated the updated file4check whether the server or CDN is caching the CSS

This is especially common when working with bundled files or deployed sites.

If developer tools show the old CSS, your latest changes are not reaching the browser.

Problem 33: The Build Tool Generated Different CSS

If you use Sass, PostCSS, Tailwind, CSS Modules, a framework, or a bundler, the CSS you write may not be exactly what the browser receives.

Example:

1.card {2  &__title {3    color: navy;4  }5}

This may compile to:

1.card__title {2  color: navy;3}

If your HTML uses:

1<h2 class=”card-title”>Title</h2>

the rule does not match.

The CSS expects:

1<h2 class=”card__title”>Title</h2>

When using tools, inspect the final CSS in the browser, not only the source file.

Problem 34: CSS Modules Changed the Class Name

CSS Modules may transform class names.

You may write:

1.title {2  color: navy;3}

But the final class may become something like:

1Title_title__abc123

If you manually write:

1<h2 class=”title”>Title</h2>

the generated CSS may not match.

With CSS Modules, classes usually need to be applied through the imported styles object in your component code.

This is not a cascade problem.

It is a class name generation problem.

Problem 35: Framework Styles Are Overriding Your CSS

Frameworks and component libraries often ship their own CSS.

Example:

1.btn {2  background-color: gray;3}

Your CSS:

1.button {2  background-color: blue;3}

HTML:

1<button class=”btn button”>Save</button>

If the framework CSS loads later, or if its selector is more specific, it may win.

Options:

1load your CSS after the framework CSS2use a clearer component selector3use cascade layers4use framework theming options5avoid fighting the framework when configuration is available6use !important only when necessary

A Debugging Workflow

When a style does not apply, use this workflow.

First, inspect the element in browser developer tools.

Second, check whether your selector appears in the Styles panel.

Third, check whether the declaration is crossed out.

Fourth, find the winning declaration.

Fifth, compare the two declarations.

Ask:

1Does my selector match?2Is my declaration invalid?3Is another declaration setting the same property?4Is the other declaration important?5Are cascade layers involved?6Is the other selector more specific?7Does the other rule come later?8Is the value inherited?9Is a media query involved?10Is an inline style involved?

This process is more reliable than guessing.

Step 1: Check Whether the Rule Exists

If your rule does not appear in developer tools at all, possible causes include:

1the selector does not match2the CSS file is not loaded3the CSS is inside a media query that does not apply4the CSS is inside an unsupported feature query5there is a syntax error6your build tool did not output the rule

Example:

1@media (min-width: 900px) {2  .card {3    padding: 2rem;4  }5}

At 700px, this rule may not appear as active because the media condition is false.

Step 2: Check Whether the Declaration Is Crossed Out

If a declaration is crossed out, it matched but lost.

Example:

1.card {2  color: black;3}4 5.card.featured {6  color: blue;7}

HTML:

1<div class=”card featured”>Text</div>

In developer tools, color: black; may be crossed out.

That means another declaration wins for the same property.

Find the winning declaration and compare:

1importance2layer3specificity4source order

Step 3: Check Computed Styles

The Computed panel shows the final value the browser uses.

For example, the Styles panel might show many possible color declarations.

The Computed panel shows the final color.

This helps you answer:

1What value is actually being used?2Which rule provided that value?3Is the value inherited?4Is the value coming from a browser default?

Computed styles are especially useful for inherited properties and layout properties.

Step 4: Disable Rules Temporarily

In developer tools, you can usually uncheck declarations.

This helps you see what changes.

For example, if this declaration is winning:

1.card .title {2  color: red;3}

Uncheck it.

If your blue style appears, you know the red declaration was blocking it.

This is a fast way to identify conflicts.

Step 5: Test a Simpler Selector

If your selector is complex, test a simpler one.

Original:

1main .content .article .card .title {2  color: blue;3}

Test:

1.title {2  outline: 2px solid red;3}

If the outline appears, the element matches .title.

Then the issue may be specificity, source order, or the original selector path.

If the outline does not appear, maybe the class name is wrong or the CSS is not loaded.

Step 6: Avoid Random !important

Do not immediately fix this:

1.title {2  color: blue;3}

by writing this:

1.title {2  color: blue !important;3}

First, find out why the original rule lost.

Maybe the winning rule is:

1.card .title {2  color: red;3}

Then a cleaner fix may be:

1.card .title {2  color: blue;3}

or:

1.card-title {2  color: blue;3}

or reorganising source order.

Use !important only when it is intentional.

Example Debugging Session: Colour Does Not Apply

HTML:

1<div class=”card”>2  <h2 class=”title”>Card title</h2>3</div>

CSS:

1.title {2  color: blue;3}4 5.card .title {6  color: red;7}

Problem:

1The title is red, but you expected blue.

Debug:

1Both selectors match.2Both set color.3Neither uses !important.4No layers are involved.5.card .title has higher specificity than .title.6Therefore red wins.

Fix options:

1.card .title {2  color: blue;3}

or:

1.card-title {2  color: blue;3}

or remove the competing red rule if it is not needed.

Example Debugging Session: Button Background Does Not Apply

HTML:

1<button class=”button primary”>Save</button>

CSS:

1.primary {2  background-color: blue;3}4 5.button {6  background-color: gray;7}

Problem:

1The button is gray, but you expected blue.

Debug:

1Both .primary and .button match.2Both are class selectors.3Specificity is equal.4.button appears later.5Therefore gray wins.

Fix:

1.button {2  background-color: gray;3}4 5.primary {6  background-color: blue;7}

or use a clearer modifier:

1.button {2  background-color: gray;3}4 5.button-primary {6  background-color: blue;7}

HTML:

1<button class=”button button-primary”>Save</button>

Example Debugging Session: Card Text Inherits Unexpected Colour

HTML:

1<section class=”warning”>2  <div class=”card”>3    <p>Card text.</p>4  </div>5</section>

CSS:

1.warning {2  color: red;3}4 5.card {6  background-color: white;7}

Problem:

1The card text is red, but you expected normal text.

Debug:

1color inherits.2.warning sets color on the parent section.3.card does not set color.4p does not set color.5The paragraph inherits red through its ancestors.

Fix:

1.card {2  background-color: white;3  color: #222222;4}

This gives the card its own text colour.

Example Debugging Session: Link Does Not Match Parent Colour

HTML:

1<p class=”notice”>2  Read the <a href=”/guide”>guide</a>.3</p>

CSS:

1.notice {2  color: green;3}

Problem:

1The paragraph is green, but the link is blue.

Debug:

1color normally inherits.2But browsers commonly style links directly.3The link has browser default link colour.4A direct link rule can override inherited parent colour.

Fix:

1.notice a {2  color: inherit;3}

Now the link uses the notice colour.

Example Debugging Session: Utility Class Does Not Work

HTML:

1<div class=”card text-center”>2  Card content3</div>

CSS:

1.text-center {2  text-align: center;3}4 5.card {6  text-align: left;7}

Problem:

1The text is left-aligned, but you expected centered.

Debug:

1Both selectors are class selectors.2Specificity is equal.3.card appears later.4Therefore text-align: left wins.

Fix:

1.card {2  text-align: left;3}4 5.text-center {6  text-align: center;7}

Or, if using layers:

1@layer components, utilities;2 3@layer components {4  .card {5    text-align: left;6  }7}8 9@layer utilities {10  .text-center {11    text-align: center;12  }13}

Example Debugging Session: Layered Utility Does Not Work

HTML:

1<div class=”card text-red”>2  Card content3</div>

CSS:

1@layer utilities {2  .text-red {3    color: red;4  }5}6 7@layer components {8  .card {9    color: navy;10  }11}

Problem:

1The text is navy, but you expected red.

Debug:

1No layer order was declared up front.2utilities layer was created first.3components layer was created second.4For normal declarations, later layers have higher priority.5components wins.

Fix:

1@layer components, utilities;2 3@layer utilities {4  .text-red {5    color: red;6  }7}8 9@layer components {10  .card {11    color: navy;12  }13}

Now the declared layer order gives utilities higher priority.

Example Debugging Session: Media Query Override Does Not Work

CSS:

1.card {2  padding: 1rem;3}4 5@media (min-width: 900px) {6  .card {7    padding: 2rem;8  }9}

Problem:

1The card still has 1rem padding.

Debug:

1Check viewport width.2If viewport is below 900px, the media query does not apply.

If the viewport is above 900px, check for another later rule:

1.card {2  padding: 1rem;3}4 5@media (min-width: 900px) {6  .card {7    padding: 2rem;8  }9}10 11.card.featured {12  padding: 3rem;13}

If the card has class featured, .card.featured is more specific and appears later.

So 3rem wins.

Example Debugging Session: Width Does Not Apply to Span

HTML:

1<span class=”badge”>New</span>

CSS:

1.badge {2  width: 100px;3  background-color: yellow;4}

Problem:

1The width does not seem to work.

Debug:

1span is inline by default.2Width does not affect normal inline elements the way it affects block or inline-block elements.

Fix:

1.badge {2  display: inline-block;3  width: 100px;4  background-color: yellow;5}

The issue was not specificity.

The property did not apply as expected because of the element’s display type.

Common Fixes

Common cascade and specificity fixes include:

1correct the selector2move the rule later3reduce the specificity of the competing rule4increase specificity deliberately5remove unnecessary !important6use a modifier class7use cascade layers8put utilities in a higher-priority layer9move broad styles into a lower-priority layer10write direct styles on the element11set inherited properties on the right parent12remove inline styles when possible

Choose the fix based on the actual cause.

Do not use the same fix for every problem.

Fix 1: Correct the Selector

If the selector does not match, fix the selector or the HTML.

Wrong:

1<h2 class=”card-title”>Title</h2>

1.card_title {2  color: navy;3}

Correct:

1.card-title {2  color: navy;3}

Or change the HTML if the CSS class is the one you want.

Fix 2: Move the Rule Later

If specificity is equal, source order can solve the problem.

Before:

1.primary {2  background-color: blue;3}4 5.button {6  background-color: gray;7}

After:

1.button {2  background-color: gray;3}4 5.primary {6  background-color: blue;7}

Use this when the rule order is the actual problem.

Fix 3: Use a More Specific Selector

Sometimes you need a selector that describes the target more clearly.

Before:

1.title {2  color: blue;3}

Competing rule:

1.card .title {2  color: red;3}

Fix:

1.card .title {2  color: blue;3}

Use specificity deliberately.

Do not create unnecessarily long selectors.

Fix 4: Use a Modifier Class

Instead of fighting base styles, use a modifier.

HTML:

1<button class=”button button-primary”>Save</button>

CSS:

1.button {2  background-color: gray;3  color: white;4}5 6.button-primary {7  background-color: blue;8}

This is clearer than writing random overrides later.

Modifier classes are useful for component variations.

Fix 5: Reduce Specificity

If a selector is too specific, it becomes hard to override.

Hard to override:

1.page .main .content .card .title {2  color: navy;3}

Better:

1.card-title {2  color: navy;3}

Lower specificity makes CSS easier to maintain.

Use structure, naming, layers, and source order instead of long selector chains.

Fix 6: Use Cascade Layers

Cascade layers help organise priority.

Example:

1@layer reset, base, components, utilities;2 3@layer components {4  .card {5    color: navy;6  }7}8 9@layer utilities {10  .text-red {11    color: red;12  }13}

HTML:

1<div class=”card text-red”>2  Text3</div>

The text is red because the utilities layer has higher priority.

This can reduce the need for !important.

Fix 7: Remove Unnecessary !important

Before:

1.button {2  background-color: gray !important;3}4 5.button-primary {6  background-color: blue;7}

The primary button stays gray.

Better:

1.button {2  background-color: gray;3}4 5.button-primary {6  background-color: blue;7}

Now the modifier can work normally.

Avoid placing !important in base component styles unless there is a strong reason.

Fix 8: Use inherit Intentionally

If a child should match its parent, use inherit.

Example:

1.card {2  color: navy;3}4 5.card a {6  color: inherit;7}

Now links inside the card use the card’s text colour.

This is useful for links, buttons, form controls, and icons.

Fix 9: Use Direct Styling Instead of Relying on Inheritance

If a child should not inherit a parent style, give it its own value.

Example:

1.warning {2  color: red;3}4 5.card {6  color: #222222;7}

HTML:

1<section class=”warning”>2  <div class=”card”>3    <p>Normal card text.</p>4  </div>5</section>

The card text can now use its own colour instead of inheriting warning red.

Fix 10: Check Layout Context

If a property has no visible effect, check the layout context.

Example:

1.item {2  align-self: center;3}

This needs the item to be inside a flex or grid container.

Parent:

1.container {2  display: flex;3}

Without the correct parent layout, the property may not work as expected.

A Practical Debugging Checklist

Use this checklist when styles do not apply.

11. Is the stylesheet loaded?22. Does the selector match the element?33. Is the declaration valid?44. Is the rule inside a media query that applies?55. Is the rule inside @supports that applies?66. Is the rule inside @scope, and is the element inside the scope?77. Is the property being set somewhere else?88. Is the other declaration !important?99. Are cascade layers involved?1010. Is one rule unlayered?1111. Which selector is more specific?1212. If specificity is equal, which rule comes later?1313. Is an inline style involved?1414. Is the value inherited from a parent?1515. Is a browser default involved?1616. Is a reset involved?1717. Is a shorthand overriding a longhand?1818. Does the property apply to this element or layout context?1919. Is a parent controlling the layout?2020. Is a build tool or framework changing the final CSS?

Work through the list in order.

Most CSS problems become clear once you identify the winning declaration.

Developer Tools Are Essential

Browser developer tools are the best way to debug cascade and specificity problems.

Use them to inspect the element.

Look for:

1matched CSS rules2crossed-out declarations3inherited styles4computed final values5media query conditions6cascade layers7browser default styles8inline styles

The browser already knows why a rule won.

Developer tools help you see that decision.

What Crossed-Out CSS Means

A crossed-out declaration means:

1This declaration matched, but another declaration won.

Example:

1.title {2  color: blue;3}4 5.card .title {6  color: red;7}

If the element is inside .card, developer tools may cross out:

1color: blue;

because:

1color: red;

wins.

Crossed-out CSS is not always an error.

It is often just the cascade working.

What Missing CSS Means

If your rule does not appear at all in developer tools, possible causes include:

1the selector does not match2the CSS file did not load3the CSS is not included in the final build4the media query is inactive5the feature query is inactive6the browser does not support the syntax7there is a syntax error

This is different from crossed-out CSS.

Crossed-out means the rule matched but lost.

Missing means the rule may not be active or may not match.

Use Outlines for Debugging

A useful debugging trick is adding an outline:

1.card {2  outline: 2px solid red;3}

Outlines do not affect layout like borders do.

They are useful for checking whether a selector matches.

If the outline appears, your selector matches the element.

If the outline does not appear, the selector may be wrong or the CSS may not be loaded.

Remove debugging outlines after you finish.

Avoid Specificity Battles

A specificity battle happens when each new rule becomes more specific than the last.

Example:

1.card .title {2  color: navy;3}4 5.page .card .title {6  color: green;7}8 9body .page .card .title {10  color: red;11}

This gets harder to maintain.

Better:

1.card-title {2  color: navy;3}4 5.card-title-success {6  color: green;7}8 9.card-title-error {10  color: red;11}

Or use layers and modifiers.

Good CSS should be predictable.

It should not require increasingly long selectors.

Avoid Overusing IDs in CSS

ID selectors are very specific.

Example:

1#main-title {2  color: navy;3}

This can be hard to override later with classes.

Example:

1.title {2  color: green;3}

The ID selector wins.

For reusable styling, classes are usually easier to manage:

1.page-title {2  color: navy;3}

Use IDs when they are appropriate, but do not rely on them for everyday component styling.

Avoid Random Overrides

This is hard to debug:

1.card {2  padding: 1rem;3}4 5.button {6  background-color: blue;7}8 9.card {10  padding: 2rem;11}12 13.title {14  color: navy;15}16 17.card {18  padding: 0.5rem;19}

The final .card padding is 0.5rem, but you have to scan the whole stylesheet to know that.

Better:

1.card {2  padding: 0.5rem;3}4 5.button {6  background-color: blue;7}8 9.title {10  color: navy;11}

Keep related styles together when possible.

Organise CSS from General to Specific

A common organisation pattern is:

1reset2base3layout4components5utilities6overrides

Example:

1/* reset */2* {3  box-sizing: border-box;4}5 6/* base */7body {8  font-family: Arial, sans-serif;9}10 11/* component */12.button {13  padding: 0.75rem 1rem;14}15 16/* utility */17.text-center {18  text-align: center;19}

This makes the cascade more predictable.

Cascade layers can make this structure even clearer:

1@layer reset, base, layout, components, utilities;

Keep Specificity Low by Default

Low specificity is easier to override.

Good:

1.card {2  padding: 1rem;3}

Harder to override:

1main .content .card {2  padding: 1rem;3}

Even harder:

1body main .content section.card[data-featured=”true”] {2  padding: 1rem;3}

Use the simplest selector that accurately targets the element.

Prefer Classes for Components

Classes are reusable and predictable.

Example:

1.card {2  padding: 1rem;3}4 5.card-title {6  color: navy;7}8 9.card-text {10  color: #333333;11}

This is usually easier to manage than deeply nested selectors:

1main section article div h2 {2  color: navy;3}

Class-based component styling makes debugging easier.

Use Utility Classes Deliberately

Utility classes are small classes that do one job.

Example:

1.text-center {2  text-align: center;3}4 5.mt-0 {6  margin-top: 0;7}

If utilities should override components, place them later or in a higher-priority layer:

1@layer components, utilities;

Then:

1@layer utilities {2  .text-center {3    text-align: center;4  }5}

This avoids unnecessary !important.

Use Comments for Intentional Overrides

If an override exists for a special reason, explain it.

Example:

1/* Overrides third-party chat widget position */2.chat-widget {3  bottom: 80px !important;4}

or:

1/* Utility state class must override component display rules */2.is-hidden {3  display: none !important;4}

Comments are useful when the CSS would otherwise look strange.

Full Example: Debugging a Component Conflict

HTML:

1<div class=”card featured-card”>2  <h2 class=”card-title”>Featured article</h2>3  <p class=”card-text”>Read this article first.</p>4</div>

CSS:

1.card {2  color: #333333;3  padding: 1rem;4}5 6.card .card-title {7  color: navy;8}9 10.featured-card {11  color: darkred;12}13 14.featured-card .card-title {15  color: red;16}

What happens?

The card text inherits darkred from .featured-card.

The title becomes red.

Why?

For the card text:

1.card sets color: #3333332.featured-card sets color: darkred3both apply to the same element4both are class selectors5.featured-card comes later6darkred wins

For the title:

1.card .card-title sets navy2.featured-card .card-title sets red3both have similar specificity4.featured-card .card-title comes later5red wins

This is predictable once you compare the matching declarations.

Full Example: Debugging Inheritance and Direct Styles

HTML:

1<section id=”theme”>2  <p class=”note”>This is a note.</p>3</section>

CSS:

1#theme {2  color: green;3}4 5.note {6  color: purple;7}

The paragraph is purple.

Why?

The parent #theme has a more specific selector.

But it styles the parent.

The .note selector styles the paragraph directly.

A direct declaration on the element beats an inherited value from the parent.

This is not a specificity conflict between #theme and .note on the same element.

They apply to different elements.

Full Example: Debugging Layers

HTML:

1<button class=”button text-red”>2  Delete3</button>

CSS:

1@layer utilities, components;2 3@layer utilities {4  .text-red {5    color: red;6  }7}8 9@layer components {10  .button {11    color: white;12  }13}

The button text is white.

Why?

The declared layer order is:

1@layer utilities, components;

For normal declarations, later layers have higher priority.

So components beats utilities.

If you want utilities to override components, write:

1@layer components, utilities;

Then the button text becomes red.

Full Example: Debugging !important

HTML:

1<div class=”alert alert-success”>2  Saved successfully.3</div>

CSS:

1.alert {2  color: red !important;3}4 5.alert-success {6  color: green;7}

The text is red.

Why?

The base .alert declaration is important.

The .alert-success declaration is normal.

Important beats normal.

Better CSS:

1.alert {2  color: red;3}4 5.alert-success {6  color: green;7}

Now the success modifier can work normally.

Full Example: Debugging Shorthand

HTML:

1<div class=”box”>Box</div>

CSS:

1.box {2  border-color: blue;3  border-style: solid;4  border-width: 4px;5}6 7.box {8  border: 1px solid gray;9}

The final border is 1px solid gray.

Why?

The later border shorthand resets width, style, and colour.

If you want only the colour to change later, write:

1.box {2  border: 1px solid gray;3}4 5.box {6  border-color: blue;7}

Now the border is 1px solid blue.

Best Practices for Avoiding Cascade Problems

Use simple class selectors for components.

Keep specificity low.

Avoid unnecessary IDs in CSS.

Avoid long descendant selector chains.

Organise CSS from broad rules to specific rules.

Use source order deliberately.

Put component variants after base component styles.

Use cascade layers for larger projects.

Put resets and vendor styles in low-priority layers.

Put utilities in higher-priority layers if they should override components.

Avoid unnecessary !important.

Use !important only for deliberate utility states, third-party overrides, or exceptional cases.

Use browser developer tools instead of guessing.

Check computed styles to find final values.

Keep related styles close together.

Use clear naming for components and modifiers.

Quick Summary

When a CSS style does not apply, the browser is usually following the cascade.

First, check whether your selector matches the element.

Then check whether the declaration is valid and active.

If the declaration is crossed out, find the winning declaration.

Compare importance, cascade layers, specificity, and source order.

Remember that class order in HTML does not decide which class wins.

Remember that direct styles on an element beat inherited values from a parent.

Remember that parent selector specificity does not transfer to children.

Remember that browser defaults and CSS resets can affect the result.

Remember that media queries only apply when their conditions are true.

Remember that shorthand properties can override longhand properties.

Remember that unlayered CSS can override layered CSS.

Avoid fixing every problem with !important.

Use developer tools, inspect the cascade, and choose the smallest clear fix.

Good CSS debugging is not guessing.

It is finding the winning declaration and understanding why it won.