Skip to content

CSS Selector Not Matching

Quick summary

Your CSS rule has no effect because the selector doesn't match any element — or a more specific rule overrides it in the cascade.

Why this happens

  • Typo in the class or id name in the CSS selector

  • Another rule with higher specificity overrides your rule

  • The element doesn't have the class or id you're targeting

Minimal example

✗ Broken code
.buton {
  color: red;
}
✓ Fixed code
.button {
  color: red;
}

The class is spelled .buton in CSS but the HTML element has class="button" — fix the typo so the selector matches.

How to diagnose

  • Use DevTools to inspect the element and check which rules are applied

  • Look for overridden rules (struck-through styles) in the Styles panel

  • Verify the selector matches by testing it in the browser console with document.querySelectorAll

How to fix

  • Fix the selector spelling to match the element's class or id

  • Increase specificity or reorder rules if the cascade is overriding

  • Add the correct class or id to the HTML element

How to prevent

  • Use DevTools inspector regularly to verify styles are applied

  • Follow consistent naming conventions (e.g., BEM) to avoid specificity wars

Related Resources

Related Glossary

Related Lessons

  • CSS

    Learn CSS fundamentals

Related Practice

← Back to language