POPULAR
Instant Online HTML Formatter
NEW TOOL
Try our Interactive Python Online Playground!
FEATURED
HTML, CSS & JS Live Code Playground
POPULAR
Try Our Online Code Editor and Compiler
POPULAR
Instant Online HTML Formatter
NEW TOOL
Try our Interactive Python Online Playground!
FEATURED
HTML, CSS & JS Live Code Playground
POPULAR
Try Our Online Code Editor and Compiler
CSS Specificity
CSS Specificity is one of the most important concepts to understand if you want full control over how styles are applied on a webpage. Many beginners feel confused when their CSS does not work as expected, even though the selector looks correct. In most cases, the real reason is specificity. CSS specificity decides which rule wins when multiple CSS rules target the same element.
In real projects, styles often come from multiple sources such as browser default styles, external libraries, global stylesheets, and custom CSS. Specificity is the system CSS uses to resolve conflicts between these rules. In this tutorial, you will learn what CSS specificity is, how it works, how to calculate it, and how to manage it properly in real-world development.
What Is CSS Specificity
CSS specificity is a set of rules that browsers use to determine which CSS declaration should be applied to an element when multiple rules target the same element and property.
When two or more selectors apply the same property to an element, the browser compares their specificity values. The selector with higher specificity wins, regardless of the order in which it appears, unless equal specificity rules apply.
Specificity answers questions like:
-
Why is my color not changing?
-
Why does one CSS rule override another?
-
Why does a class override an element selector?
-
Why does an ID selector seem impossible to override?
Understanding specificity removes guesswork from CSS.
Why CSS Specificity Is Important
CSS specificity is important because it controls how styles behave in complex layouts.
Key reasons why specificity matters:
-
Prevents unexpected style overrides
-
Helps debug CSS issues faster
-
Essential for large stylesheets
-
Important when using CSS frameworks
-
Keeps styles predictable and maintainable
-
Reduces dependency on !important
Without understanding specificity, CSS becomes trial and error.
How CSS Decides Which Style to Apply
When the browser applies CSS, it follows this general order:
-
Importance, such as !important
-
Specificity of selectors
-
Order of appearance in the stylesheet
If two selectors target the same element and property, and neither uses !important, the browser compares their specificity values. The rule with higher specificity is applied.
If specificity is equal, the rule written last wins.
Understanding the Specificity Hierarchy
CSS selectors have different weights. Some selectors are more powerful than others.
From lowest to highest priority:
-
Element selectors and pseudo-elements
-
Class selectors, attribute selectors, and pseudo-classes
-
ID selectors
-
Inline styles
This hierarchy is the foundation of specificity.
CSS Specificity Value System
Specificity is calculated using a four-part value often written as:
Inline, ID, Class, Element
Each part represents a category of selectors.
Let’s understand each level in detail.
Element Selectors and Pseudo-elements
Element selectors target HTML tags such as div, p, h1, section.
Example:
p {
color: blue;
}
Specificity value:
0, 0, 0, 1
Pseudo-elements like ::before and ::after also fall into this category.
Example:
p::first-letter {
font-size: 32px;
}
These selectors have the lowest specificity.
Class Selectors, Attribute Selectors, and Pseudo-classes
These selectors have higher priority than element selectors.
Examples include:
.text {
color: red;
}
input[type="text"] {
border-color: green;
}
a:hover {
color: orange;
}
Specificity value:
0, 0, 1, 0
Even though attribute selectors and pseudo-classes look complex, they carry the same weight as a class selector.
ID Selectors
ID selectors have a much higher specificity and can override class and element selectors easily.
Example:
#main-title {
color: purple;
}
Specificity value:
0, 1, 0, 0
Because of their strength, ID selectors should be used carefully.
Inline Styles
Inline styles are applied directly inside the HTML element.
Example:
<p style="color: green;">Text</p>
Specificity value:
1, 0, 0, 0
Inline styles override almost all other CSS rules, except those marked with !important.
Calculating CSS Specificity
Let’s see how specificity is calculated with real examples.
Example 1:
p {
color: blue;
}
.text {
color: red;
}
The class selector wins because:
p → 0,0,0,1
.text → 0,0,1,0
Example 2:
div p {
color: blue;
}
.section .text {
color: red;
}
Specificity calculation:
div p → 0,0,0,2
.section .text → 0,0,2,0
The second selector wins.
Specificity with Multiple Selectors
Specificity values add up.
Example:
#content .box p {
color: black;
}
Specificity:
ID → 1
Class → 1
Element → 1
Total value:
0,1,1,1
This is stronger than:
.box p {
color: blue;
}
Which has:
0,0,1,1
Universal Selector and Specificity
The universal selector (*) has no specificity value.
Example:
* {
margin: 0;
}
Specificity:
0,0,0,0
It can be overridden easily by any other selector.
Specificity vs Source Order
When two selectors have the same specificity, the rule that appears last in the CSS wins.
Example:
p {
color: red;
}
p {
color: blue;
}
Both selectors have equal specificity, so the second rule applies.
Specificity and !important
The !important keyword overrides normal specificity rules.
Example:
p {
color: red !important;
}
#text {
color: blue;
}
The paragraph will be red despite the ID selector.
While powerful, !important should be avoided whenever possible because it breaks the natural flow of CSS.
Common CSS Specificity Problems
Beginners often face these issues:
-
Styles not applying as expected
-
Overusing ID selectors
-
Relying too much on !important
-
Writing very long selectors
-
Fighting with framework styles
Most of these problems come from misunderstanding specificity.
Best Practices for Managing CSS Specificity
To write clean and maintainable CSS, follow these practices:
-
Prefer class selectors over IDs
-
Avoid inline styles
-
Keep selectors short and readable
-
Avoid deep nesting
-
Use consistent naming conventions
-
Structure CSS logically
-
Use !important only as a last resort
These practices help prevent specificity conflicts.
Specificity in Real Projects
In real-world development, specificity matters when:
-
Customizing CSS frameworks
-
Working with large codebases
-
Styling reusable components
-
Managing global vs local styles
-
Debugging unexpected layout issues
Professional developers rely on specificity knowledge daily.
Debugging Specificity Issues
Browser developer tools are your best friend.
Using the inspector, you can:
-
See which CSS rule is applied
-
Check overridden styles
-
Compare specificity values
-
Identify conflicting selectors
This makes fixing CSS issues much faster.
CSS Specificity and Maintainable Design
Good CSS architecture focuses on controlling specificity rather than fighting it.
Using component-based styles, utility classes, and logical structure keeps specificity low and manageable. This makes future changes easier and safer.
Summary of CSS Specificity
CSS specificity determines which CSS rule is applied when multiple rules target the same element. It is based on a hierarchy of selector types including element selectors, class and attribute selectors, ID selectors, and inline styles. Understanding how specificity is calculated helps you avoid unexpected overrides, reduce reliance on !important, and write clean, predictable CSS. Mastering specificity is essential for building scalable, professional, and maintainable stylesheets.
⚡ Want to test or run code snippets from this lesson?
Use CodePractice Universal Try-It Editor to run HTML, CSS, JS, Python, C, C++, Java & MySQL live in your browser!
Launch Free Live Code EditorPractice Questions
Q1. Set color using an element selector (h1).
Q2. Override with a class selector (.title).
Q3. Override again using an ID selector (#heading).
Q4. Use an inline style to set background color.
Q5. Add !important to a font-size rule.
Q6. Use both class and pseudo-class in a selector.
Q7. Add an attribute selector to style checkboxes.
Q8. Write a selector that combines element + ID + class.
Q9. Add multiple conflicting styles and determine which wins.
Q10. Use same specificity in two rules and reorder to test precedence.
