Introduction

Before we dive into the specificity of CSS, let's revise what CSS is, CSS stands for Cascading Stylesheets, where cascading means the process of combining multiple stylesheets and resolving conflicts between the CSS rules and declarations.

So, specificity comes in the process of cascading which we will learn now.

What is specificity?

It is the set of rules applied to the CSS selectors to determine which styles are applied to an element. Every selector has a specificity value. The more specific a CSS selector is, the larger the specificity value hence, it will be applied to an element.

If two rules are applied to the same element, then, CSS specificity comes into picture to identify which rule should be applied to the element according to it's specificity value.

Order of specificity

It has a order through which the browser calculates which style to apply, which is as follows:

Inline
ID
Class, pseudo-class, attributes
Element, pseudo-elements

The first in order is the Inline style, Inline style are given more importance in the cascading process so if an element has an Inline style and also styles using ID or class then the Inline styles will be applied and others will be ignored.

//Inline style and styling with ID
<h1 id="heading" style="color:blue;">A Blue Heading</h1>

//CSS stylesheet
#heading{
color:yellow
}

Here, the color of the h1 element will be blue as the Inline style has more precendence.

Same goes for the ID, IDs are given more precedence over class and class is given more precedence over elements.

Calculation of specificity

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations.

For calculating specificity we follow a formula which is
(Inline, Ids, classes, elements) also (0,0,0,0)

So, we will look into different examples for a better understanding of the calculation.

//We will use same HTML template for all the examples
<body>
   <main>
       <nav>
           <button class="btn"  id="main-btn">Click here</button>
       </nav>
   </main>
</body>

Example 1 :

//CSS stylesheet
button{
   background-color: red;
}
//Specificity : (0, 0, 0, 1)
// Here the 4th place is 1 because we are styling the
// element using the button tag

.btn{
   background-color: yellow;
}
//Specificity : (0, 0, 1, 0)
// Here the 3rd place is 1 because we are styling the
// element using class

#main-btn{
   background-color: green;
}
//Specificity : (0, 1, 0, 0)
// Here the 2nd place is 1 because we are styling the
// element using ID

//So finally the button will have the background-color as green
// since ID has more precedence over class and element tag

Output :

Example 2 :

//CSS stylesheet
button{
   background-color: red;
}
//Specificity : (0, 0, 0, 1)
// Here the 4th place is 1 because we are styling the
// element using the button tag

main nav .btn {
background-color: blue;
}
//Specificity : (0, 0, 1, 2)
// Here the 3rd place is 1 and 4th place is 2 because we
// are styling the element using 2 elements which is main
// and nav and the class of the button which is btn respectively,
// So 1 class and 2 element.

#main-btn{
   background-color: pink;
}
//Specificity : (0, 1, 0, 0)
// Here the 2nd place is 1 is because we are styling the
// element using ID

//So finally the button will also have the background-color as
// pink since ID has more precedence over class and element tag

Output :

Summary

Now we have the basic understanding of what and how the specificity is calculated, to learn more in depth you can read the following article.

Jowel's Tech Blog