Post
Ask Question

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.

Specificity in CSS
 
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.
 
Specificity in CSS
 
Specificity in CSS

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.

Summary

In this blog, we have learned about CSS specificity. I hope you learned and enjoyed it. I look forward to seeing your feedback. 
Next Recommended Reading How To Check Browser Compatibility Of HTML Elements And CSS Class