What is CSS Specificity?
In simple terms, CSS Specificity is how the browser decides which style to apply when multiple selectors try to assign the same property with different values (a conflict).
A simple example:
<p>This paragraph has conflicting styles</p>
p {
color: blue;
}
p {
color: red;
}
In this example, the <p> tag is given two different colors: blue and red. This is where CSS Specificity steps in — it helps the browser decide which style to apply. It’s not possible to apply both or ignore both, so one must win.
"I understand how selectors work. There's no way I'd use the same selector and assign conflicting styles!"
As a beginner, you might be cautious enough to avoid such conflicts. But once you enter the professional world, knowing how CSS specificity works becomes crucial.
Real-life situations:
- When you split your CSS across multiple files — e.g.,
default.cssfor base styles andstyle.cssfor custom overrides. - When you copy and customize someone else’s HTML-CSS template.
- When you use a CSS framework and want to override its styles.
- When you work in a team with other developers.
- And more…
How Does CSS Specificity Work?
CSS specificity works by assigning weights to different types of selectors. The selector with the highest total weight wins. If multiple selectors have the same weight, the last one declared is used. If they have the same weight and both use ID selectors, the one closest to the element wins.
Example using multiple IDs:
<div id="blog">
<article id="article">
<p id="paragraf">The nearest ID wins</p>
</article>
</div>
/* Not applied */
#blog {
color: green;
}
/* Applied */
#paragraf {
color: red;
}
/* Not applied */
#article {
color: blue;
}
Specificity Weight for Each Selector Type
Specificity is calculated using three columns:
- Id
- Class, Atribut, dan Pseudo-classes
- Elemen dan Pseudo-elements
We visualize it as 0-0-0, from left to right: ID, Class, and Element. The leftmost column carries the most weight, and the rightmost the least.
Note: This is not like counting hundreds-tens-units. If the class column reaches 10, it doesn’t roll over into the ID column. It just keeps counting up.
Calculating Specificity
<!-- We'll calculate specificity based on this structure -->
<body id="body" class="container dark-mode">
<section id="section">
<div>
<h1 id="heading1" class="impact">What color will I be?</h1>
</div>
</section>
</body>
- ID Count Example:
#body #heading1 {
color: indigo;
}
This uses 2 IDs, 0 classes, 0 elements → Specificity: 2-0-0
- Class Count Example:
#body.container.dark-mode #heading1.impact {
color: violet;
}
2 IDs, 3 classes, 0 elements → Specificity: 2-3-0
- Element Count Example:
body#body.container.dark-mode section div h1#heading1.impact {
color: red;
}
2 IDs, 3 classes, 4 elements → Specificity: 2-3-4
Based on this calculation, the style with color: red will be applied.
A longer selector doesn't always win. Specificity must still be calculated.
To prove that, we can override the longer selector above with a shorter one:
#body #section #heading1 {
color: green;
}
Inline CSS
"Inline styles don’t use selectors, so how does specificity work for them?"
Inline CSS has its own weight — stronger than ID, class, or element selectors. It adds an extra specificity column, making it look like 1-0-0-0.
Let’s override all external/internal styles with an inline style:
<h1 id="heading1" class="impact" style="color: black;">What color will I be?</h1>
!important
"So does that mean inline CSS is unbeatable?""
Not quite. Inline styles can still be overridden using !important. For example:
#body #heading1 {
color: indigo !important;
}
The !important rule bypasses specificity entirely. But it’s considered bad practice, so use it carefully and sparingly.
Feel free to drop a question in the comments — I’d be happy to help. See you in the next post! 👋
Top comments (1)
good job.
i am a fullstack web developer.
Let's share our studies.