Semantic HTML: Writing Code That Means Something
Understand why semantic tags matter for accessibility and SEO. We cover when to use each element and how it affects your styling.
Read Guide
Beginner Guide
CSS Selectors and Specificity Explained
Stop fighting with cascading styles. Learn exactly how CSS decides which rules win and why your styles sometimes don’t apply the way you expect.
Why This Matters
You’ve probably written CSS that just wouldn’t apply. You add a
rule, refresh the page, nothing happens. Then you throw an
!important at it and suddenly it works. Sound
familiar? That’s usually a specificity problem.
Understanding selectors and specificity isn’t just about fixing bugs — it’s about writing CSS that’s predictable, maintainable, and actually does what you intended. Once you get this, the CSS cascade stops feeling like magic and starts feeling like you’re in control.
The Three Types of Selectors
CSS selectors are how you target HTML elements to style them. There are three main categories you need to know, and each works differently.
1. Simple Selectors
Target elements directly by tag name, class, or ID. These
are your everyday tools — p,
.button, #header. Simple and
straightforward.
2. Combinators
Select elements based on their relationship to other elements. Think “child of”, “next to”, or “somewhere inside”. These give you precision targeting.
3. Pseudo-classes
Target elements in specific states like :hover,
:focus, or :nth-child(). These
make interactive experiences possible.
Understanding Specificity
Specificity is a scoring system that determines which CSS rule wins when multiple selectors target the same element. It’s calculated using a simple point system: IDs (100 points), Classes (10 points), Elements (1 point).
Here’s the real deal: a selector with an ID always beats a selector with just classes. A selector with classes always beats a selector with just element tags. It’s not about which rule comes last in your file — it’s about which selector is more specific.
p
0-0-1
.highlight
0-1-0
#header
1-0-0
How to Use This Knowledge
Here’s where you actually apply this. Stop reaching for
!important like it’s a fix-all. Instead, understand
why your rule isn’t applying and write a more specific selector.
01
Inspect the Element
Use browser developer tools to see which CSS rules are actually being applied. Look for crossed-out rules — those got overridden.
02
Calculate Specificity
Count the IDs, classes, and elements in each selector. The higher score wins. It’s that simple.
03
Increase Specificity (Properly)
Add another class or make the selector more specific.
Don’t jump to IDs or !important — that’s a
shortcut that creates bigger problems.
Key Takeaways
CSS doesn’t work magic. It uses specificity to decide which rule wins when there’s a conflict.
IDs are worth 100 points, classes are worth 10, and element selectors are worth 1. It’s a scoring system.
!important isn’t evil, but it’s a last resort.
Fix your selectors instead.
Your browser’s developer tools show you exactly which rules apply. Use them.
Once you understand selectors and specificity, you’ll write CSS that actually behaves the way you expect. No more mysterious style conflicts. No more wondering why your rule isn’t working. Just predictable, reliable styling.
Continue Learning
Educational Note
This guide is educational material designed to help you understand CSS fundamentals. CSS standards evolve, and browser behavior may vary. We recommend testing your code across different browsers and consulting the official CSS specifications from W3C for the most current standards. The techniques shown here are best practices as of February 2026, but always verify with current documentation.