Specificity in CSS
Saurav Maheshwari
Before going to the definition ,we can understand it using array of numbers(digits).
There are 4 digits in this array. First one is important if we start from right side, then id , then class and then element.
and assign each element a value.
Then we get a digit like this. All these digits stored in a different element of this array. In below table I am using some random specificity values. There can be more values other than that.
Specificity:(1,1,1,1) a -> | 1111 greatest number here |
Specificity:(0,1,1,1) b-> | 0111 smaller than 1111 |
Specificity:(0,0,1,1) c-> | 0011 smaller than 0111 & 0111 |
Specificity:(0,0,0,1) d-> | 0001 smaller than all of above. |
If you are using any code editor like VS code you can easily see these specificity by hovering your mouse pointer to the selectors.
Also CSS styles which are used in external sheets (i.e. external CSS) are less specific then the style we used in style tag inside head tag (i.e. Internal CSS).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Specificity</title>
<link rel="stylesheet" href="styles.css" / >
<style>
.div<code>class</code> {
background-color: blue;
}
</style>
</head>
<body>
<div <code>id</code>="divID" <code>class</code>="div<code>class</code>" style="background-color: red">
I am a div
</div>
</body>
</html>
#divID {
background-color: green;
}
Do it yourself : Try with with !important keyword in different types of CSS . !important keyword has always high priority.
Style which we used inside the element itself using style attribute is called Inline CSS , has the greatest specificity than external and internal CSS.
Supposing all our styles belong to same kind(inline,internal or external) , the greater the specificity number they have , their styles will override all the styles. If two selectors have same specificity , then the selctors defined in the bottom(with respect to each other) will be used.
Specificity
It is the process of selecting the style that will overrides it property on a specific element.
The CSS having more specificity, will be used to style that element.
!important
It has has the highest priorityy among all of the 4, even we have used any type of CSS(external, internal or inline), it has always the highest priority. But by using important keyword sometimes it is harder for us to debug our stylesheet. So I don't recommended to use it (not always, you can use it , if needed).
Specificity will be 1,3,0,0
#id1 ,#id2, #id3{
background-color:red !important;
}
#id
id is unique for every element. Using this CSS decides on which specific element styles will be applied. So I don't recommended to use it (not always, you can use it , if needed).
Specificity will be 0,3,0,0
#id1 ,#id2, #id3{
/* your code here */
}
.class
class is not unique for element.It can be used multiple times and is less specific. It has less specificity than id selector and used most of the time by developers. It includes class selectors, pseudo class selectors ,attribute selectors etc..
###Specificity will be 0,0,3,0
.class1 ,.class2, .class3{
/* your code here */
}
Specificity will be 0,0,4,0
.class1 ,.class2[type="text"], .class3{
/* your code here */
}
Specificity will be 0,0,4,0
.class1 ,.class2:checked, .class3{
/* your code here */
}
element
element includes all the header tags of html like header,paaragraph, div, span etc.
Specificity will be 0,0,0,3
h1,h2,h3{
/* your code here */
}
Comment if I have committed any mistake. Let's connect on my socials. I am always open for new opportunities , if I am free :P
Subscribe to my newsletter
Read articles from Saurav Maheshwari directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by