22/02/2026, 22:54 Specificity | CSS Tutorial | CodeWithHarry
</>CodeWithHarry
Start Learning Tutorials
CSS Tutorial CSS Basics
Specificity
When you style a webpage, sometimes multiple CSS rules target the same element. So, which one
wins? 🤔 That’s where CSS specificity comes in.
It’s basically a weight system that determines which rule has more power. The higher the specificity,
the stronger the rule — and the browser applies it.
Let's consider the following code:
[Link] 1/10
22/02/2026, 22:54 Specificity | CSS Tutorial | CodeWithHarry
<html>
<head>
<style>
*{
color: gray;
}
#title{
color: red;
}
.h1{
color: blue;
}
h1{
color: pink;
}
</style>
</head>
<body>
<h1 id="title" class="h1" style="color:purple">CodeWithHarry</h1>
</body>
</html>
Here the question is, what color will h1 be assigned to? This is calculated based on the selector's
components which we will discuss in this tutorial.
The Cascade Algorithm
CSS stands for Cascading Stylesheets. The cascade is the algorithm for solving conflicts where
multiple CSS rules apply to an HTML element. It's the reason that the text of the button styled with
the above CSS will be purple.
Understanding the cascade algorithm helps you understand how the browser resolves conflicts like
this. The cascade algorithm has 4 distinct stages.
1. Position and order of appearance: the order in which your CSS rules appear
[Link] 2/10
22/02/2026, 22:54 Specificity | CSS Tutorial | CodeWithHarry
2. Specificity: an algorithm that determines which CSS selector has the strongest match (inline >
ID > class > element > universal)
3. Origin: the order in which CSS appears and where it comes from, whether that is a browser
style, CSS from a browser extension, or your authored CSS
4. Importance: some CSS rules are weighted more heavily than others, especially with the
!important rule type
Let's look into all these one by one.
Effect of Position
If two rules have the same specificity, the last one declared wins. In an HTML page, you can add
styles in different ways: through a <link> tag, a <style> tag, or directly in the element's style
attribute. If you have one <link> tag at the top of your page and another at the bottom, the styles
from the bottom one will be used. The same goes for <style> tags; the ones lower down on the
page take priority.
For example:
color: red;
}
p {
color: blue;
}
The <p> text will be blue, because that rule comes later.
An inline style attribute with CSS declared in it will override all other CSS, regardless of its
position, unless a declaration has !important defined.
If the browser doesn't support a property, it is ignored!
Specificity
[Link] 3/10
22/02/2026, 22:54 Specificity | CSS Tutorial | CodeWithHarry
CSS specificity determines which style rules get applied to an element when there are conflicts.
Higher specificity means the style will be used. It's calculated based on a point system involving
inline styles, IDs, classes, and tag names.
Inline Styles
Inline styles have the highest specificity and will always override styles if other selector(s) are also
defined.
<html>
<head>
<style>
*{
color: gray;
}
#title{
color: red;
}
.h1{
color: blue;
}
h1{
color: pink;
}
</style>
</head>
<body>
<h1 id="title" class="h1" style="color:purple">CodeWithHarry</h1>
</body>
</html>
[Link] 4/10
22/02/2026, 22:54 Specificity | CSS Tutorial | CodeWithHarry
Here, you can see that the color: purple is applied to the h1 tag.
ID Selector
The ID selector also has high specificity but comes after the inline Style specificity. So, if we have
an ID and other selectors except the inline style, then the element will take the ID selector
properties and values.
<head>
<style>
*{
color: gray;
}
#title{
color: red;
}
.h1{
color: blue;
}
h1{
color: pink;
}
</style>
</head>
<body>
<h1 id="title" class="h1">CodeWithHarry</h1>
</body>
</html>
[Link] 5/10
22/02/2026, 22:54 Specificity | CSS Tutorial | CodeWithHarry
Here, you can see the color: red is applied to the h1 tag.
Class and Attribute Selectors
Class selectors and attribute selectors have moderate specificity. Suppose the element has a class
or attribute selector and not an inline style or ID selector, then the element will take properties and
values from the class or attribute selector.
<head>
<style>
*{
color: gray;
}
.h1{
color: pink;
}
</style>
</head>
<body>
<h1 class="h1">CodeWithHarry</h1>
</body>
</html>
Here, you can see color: pink is applied to the h1 tag.
Element Selector
Element selectors like <p> , <div> , <a> , etc. have low specificity.
[Link] 6/10
22/02/2026, 22:54 Specificity | CSS Tutorial | CodeWithHarry
<head>
<style>
*{
color: gray;
}
h1{
color: tomato;
}
</style>
</head>
<body>
<h1 class="h1">CodeWithHarry</h1>
</body>
</html>
Here, you can see color: tomato is applied to the h1 tag.
Universal Selector
Universal selectors (*) and combining selectors like not, first-child, and last-child have the lowest
specificity.
<head>
<style>
*{
color: gray;
}
</style>
</head>
[Link] 7/10
22/02/2026, 22:54 Specificity | CSS Tutorial | CodeWithHarry
<body>
<h1 class="h1">CodeWithHarry</h1>
</body>
</html>
Here, you can see color: gray is applied to the h1 tag.
Therefore, the Specificity Hierarchy -
Inline Style > ID Selector > Class/Attribute/Pseudo-class > Element Selector > Universal
Selector
Specificity Calculation
To calculate specificity, assign a value to each part of the selector:
Universal Selector: 0
Element selectors and pseudo-elements: 1
Class selectors, attribute selectors, and pseudo-classes: 10
ID selectors: 100
Inline styles: 1000
Then, add up the values of all the parts in the selector.
Here is an example:
<h1 id="title" class="h1">CodeWithHarry</h1>
[Link] 8/10
22/02/2026, 22:54 Specificity | CSS Tutorial | CodeWithHarry
Here, the specificity value will be 111 because ID has a specificity of 100, the class has a specificity
of 10, and the h1 element has a specificity of 1.
In the case of a specificity tie, the rule that appears last in the CSS is applied.
Importance
The !important flag in CSS is used to give a particular style rule the highest level of importance,
overriding any other competing styles. When you add !important to a CSS rule, it will take
precedence over other rules affecting the same element, regardless of their specificity. For example,
if you have:
p {
color: red !important;
}
p {
color: blue;
}
The text in the <p> element will be red, not blue, because the !important flag makes that rule
more important.
An !important at the end of a CSS value gets a specificity score of 10,000 points. This is the
highest specificity that one individual item can get.
However, it's generally best to use !important sparingly, as it can make debugging and
maintaining your stylesheets more complicated. It can override styles in ways that are hard to trace,
leading to unexpected results.
Quick Quiz
What will be the specificity value of the following selector:
[Link] 9/10
22/02/2026, 22:54 Specificity | CSS Tutorial | CodeWithHarry
[Link]-class[href]:hover {
color: red;
Main Learn
Home Courses
Contact Tutorials
Work With Us Notes
My Gear
Legal Social
Terms GitHub
Privacy Twitter (X)
Refund YouTube
Facebook
Made with ❤️ and ☕ in India
[Link] 10/10