Specificity In CSS

Introduction
In this article, we shall learn what Specificity is in CSS. We shall also learn how Specificity is calculated with some examples.

Let's get started now.

Specificity in CSS

Specificity defines the preference of classes out of several CSS classes which will be applied to a particular element. This case happens when more than one class points to a particular element in a document. Specificity is a numeric value shows which selector is pointing more specifically to that element.

In this case, a CSS class overrides to another CSS according to their higher specificity value.

Creating HTML file

To understand it let’s create a simple HTML file.

1. <html>  
2.     <head>  
3.         <title>Learning about specificity in CSS</title>  
4.     </head>  
5.     <body>  
6.         <p id="specificityBlog" class="blog">  
7.           This is CSS blog and we are learning about CSS.  
8.         </p>  
9.     </body>  
10. </html>  

Creating CSS class

To point out the above single paragraph we have created four CSS classes which are element, id and class selector as shown below.

1. <style type="text/css">  
2.     body{  
3.       color : red;  
4.       background-color: green;  
5.     }  
6.     p{  
7.       color : blue;  
8.       background-color: pink;  
9.     }  
10.     #specificityBlog{  
11.       color : orange;  
12.       background-color: yellow;  
13.     }  
14.     .blog{  
15.       color : LightCoral;  
16.       background-color: green;  
17.     }  
18. </style>  

Now, we shall save the file and open it into the browser. Now, inspect it and see the effect. It will be shown as below.

 

Explanation

As we can see after inspecting and pointing to the paragraph tag, in the right side of the inspected window some of the CSS has been streaked i.e., it has less specificity and hence has been deleted. We can also see the CSS definition with the ID selector has been only applied because it has more specificity value.

To know more about CSS Specificity visit here.

Specificity Calculator

To know and calculate the specificity value you can visit the link here.

 

 

Here, we have calculated specificity value of class and ID. As we can see the specified value of the class is 10 while the specificity value of ID selector is 100. In this case, CSS with class selector will be overtraded by the CSS of ID selector.