How are the points in CSS specificity calculated ?

Last Updated : 26 Jun, 2022

In this article, we are going to discuss about how the points in CSS specificity calculated.

CSS Specificity: The concept of CSS Specificity comes when more than one CSS rules points to a same element. At this point the selector with highest specificity is considered as highest priority and apply it to the HTML text.

For example the ID selector CSS code has higher priority when compared to element selector CSS code.

The specificity hierarchy of CSS Selectors is given below:

Specificity hierarchy

Calculating Specificity: For each CSS selector there are different points that are considered while checking the priority. Given below is the table consisting of various CSS selectors and the points associated with them.

CSS Selector	Points
Inline CSS	1000
ID selector	100
Class selector	10
Element Selector	1

Let’s look into few examples on Specificity calculation.

Selector	Specificity Value
b	1
b .classdemo	1+10=11
b #idDemo	1+100=101
Inline CSS <b style=”color: green;”>	1000

Let’s look into an example program on how CSS Specificity is used in applying a style to an HTML element.

Example 1: Let’s try to apply the CSS for the content in <h2> element using class selector, id selector, and Inline CSS and figure out what is applying to the text in CSS.

As per CSS Specificity, Compared to the class selector and id selector, the inline selector has a high priority because of its high specificity score.

In the below code the specificity scores of each type is given below:

CSS Selector	Specificity Score
h2.className	(element + classSelector) 1+10=11
h2#idName	(element + idSelector) 1+100=101
<h2 class=”className”, id=”idName”, style=”color:blue;”> (Inline CSS)	1000

As Inline CSS has high Specificity score when compared to others, This particular style (STyle specified in inline CSS) is applied to the text in the <h2> element.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        h2.className { 
            color: red; 
        } 
  
        h2#idName { 
            color: black; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 class="className" , id="idName" ,  
            style="color:blue;">CSS Specificity</h2> 
</body> 
  
</html>

Output:

Example 2: In the below code two types of CSS selectors are present for the same <p> element. In this case, CSS Specificity is used to find which has higher priority and applies the higher priority style to the HTML element. Here id selector has high specificity score i.e. 100 compared to the class which is 10. So id selector CSS style will be applied to the text in the <p> element.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Page Title</title> 
    <style> 
        .demoClass { 
            color: yellow; 
        } 
  
        #demoID { 
            font-weight: bold; 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h2>Welcome To GFG</h2> 
        <p id="demoID" class="demoClass"> 
              Default code has been loaded into the Editor.</p> 
  
    </center> 
</body> 
  
</html>