Koustav Chatterjee's Blog
CSS Specificity: A brief Overview

CSS Specificity: A brief Overview

Koustav Chatterjee's photo
Koustav Chatterjee
·

3 min read

What is Specificity algorithm?

Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. It is basically a rank or a score applied to an css selector which enables the browser to apply style to an element when there is a conflicting rule. But now the question arise, what should be the hierarchy to assign the weights?

Well, the specificity hierarchy follows the order below:

  1. Inline CSS: Inline styles added directly to an element have the highest specificity.

     <p style="color:blue">This is a paragraph</p>

  2. ID selectors: ID selectors are highly specific and will override class or type selectors.

     <p id="p1">This is a paragraph</p>

#p1{
    color:blue;
}

  1. Class Selector: Class selectors have medium specificity.

     <p class="para">This is a paragraph</p>

     .para{
     color: red;
 }

    1. Type Selectors: Type selectors and pseudo-elements have the lowest specificity.

       <p>This is a paragraph</p>

       p{
     color: red;
 }

      Note: We can use “!important” to override specificity of any element with it’s priority as the highest.

Rules to Calculate Specificity

Specificity is denoted by four parts value (a,b,c,d) where

a: Inline CSS value

b: ID selector value

c: Class selector value

d: Type selectors and pseudo-elements

Some examples below:

i. Inline VS ID selector

<div id="main" style="color: blue;">Hello</div>
<style>
#main{
    color: red;
}
</style>

Here, Hello will be in blue color as Inline has higher priority compared to ID i.e. (1,0,0,0)>(0,1,0,0).

ii. ID VS Class Selector

<div id="main" class="text">Hello</div>
<style>
#main{
    color: red;
}
.text{
color:green;
}
</style>

Here, Hello will be in green color since ID has higher priority i.e. (0,1,0,0).(0,0,1,0)

iii. Class VS Type Selectors

<button class="btn">Click me</button>
<style>
.btn{
color: blue;
}
button{
color:yellow;
}
</style>

Here, the button will appear in blue color since (0,0,1,0)>(0,0,0,1)

A Special Case

<div id="main" class="text">Hello</div>
<style>
#main{
    color: red;
}
.text{
color:green !important;
}
</style>

The !important declaration overrides normal specificity rules. Even though .text has a lower specificity, the presence of !important means its rule will take precedence over the ID selector.

Specificity only applies when the same element is targeted by multiple declarations in the same cascade layer or origin. Specificity only matters for declarations of the same importance and same origin and cascade layer. If matching selectors are in different origins, the cascade determines which declaration takes precedence.When two selectors in the same cascade layer and origin have the same specificity, scoping proximity is then calculated; the ruleset with the lowest scoping proximity wins.

Conclusion

CSS specificity is a foundational concept that empowers you to write clean and efficient styles. By understanding how specificity works and following best practices, you can create scalable and maintainable CSS for your projects. Practice calculating specificity and experiment with different selectors to master this essential skill.

ChaiCodeCSSCSS3