- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How are the points in CSS specificity calculated?
CSS specificity, is a type of process in which different CSS selectors are differentiated or prioritize according to the points, and the selector with highest number of specificity points will win and the CSS styles of that selector will be applied to the element.
The points hierarchy of each CSS selector is shown int the below table with their priorities −
| Sr. No. | CSS Selectors | Specificity Points |
|---|---|---|
| 1 | Element Selector | 1 |
| 2 | Class Selector | 10 |
| 3 | ID Selector | 100 |
| 4 | Inline CSS | 1000 |
| 5 | Element + Class Selector | 1 + 10 = 11 |
| 6 | Element + ID Selector | 1 + 100 = 101 |
Use case − Suppose, you have an element with a Class and ID, and you are trying to give it CSS using both the class and the ID selector. At that time, it will assign the CSS styles defined using the ID selector as the specificity points of ID selector are 10 times higher than that of Class.
Let us now understand the difference between these selectors and their priorities in details with the help of code example.
Steps
Step 1 − In the first step, we will define an HTML element with a class as well as a ID attribute.
Step 2 − In this step, we will write CSS for the element by selecting it with the help of a CSS selector and check for their priorities.
Example
The below example will illustrate the difference between the different CSS selectors and their priorities −
<html>
<head>
<style>
/* CSS of the main Div using Class = 10 points and ID = 100 points selectors */
#IdDemo {
background-color: #84abb5;
color: white;
height: 150px;
text-align: center;
}
.classDemo {
background-color: green;
color: white;
height: 400px;
text-align: end;
}
/* Heading Styles to show difference between only class = 10 points and element + class selector = 11 points */
h2.demoH2Class {
color: #e6d4b6;
background-color: #414141;
}
.demoH2Class {
color: red;
background-color: white;
}
</style>
</head>
<body>
<div id = "IdDemo" class = "classDemo">
<h2 class = "demoH2Class" id = "demoH2ID"> This is Heading of Demo element. </h2>
</div>
</body>
</html>
In the above example, we have used the same CSS property on the same element by selecting it with the help of two different selectors and we can clearly see that the CSS of the selector with higher specificity point is applied on the element.
Example 2
Below example will explain the difference between some more CSS selectors with respect to their specificity points −
<html>
<head>
<style>
/* CSS of the main Div using and element + ID = 101 points selectors */
div#IdDemo {
background-color: green;
color: blue;
height: 250px;
text-align: start;
}
/* Heading Styles to show difference between only ID = 100 points and element + ID = 101 points selector */
h2#demoH2ID {
color: #e6d4b6;
background-color: #414141;
}
#demoH2ID {
color: red;
background-color: white;
}
</style>
</head>
<body>
<!-- CSS of the main div is given inline = 1000 points and inside the ID + element = 101 points -->
<div id = "IdDemo" class = "classDemo"
style = "background-color: #84abb5; color: white; height: 150px; text-align: center;">
<h2 class = "demoH2Class" id = "demoH2ID">This is Heading of Demo element.</h2>
</div>
</body>
</html>
In the above example, we have again used the same CSS properties with different values inside the different CSS selectors. In case of the main div element, we have used the Inline and the ID selector to apply the CSS, but because of the priority of the inline selector is far more than that of ID selector, the inline CSS is applied to the element. While, In case of h2 heading we have used ID and element + ID selector and the CSS specificity points of the later selector are more, hence the CSS of the element + ID selector is applied to the element.
Conclusion
In this article, we have learned not only about the CSS specificity points calculation but also learned the difference between the priority of the CSS written inside the different CSS selectors with respect to their specificity point in details and practically with the help of code examples. We have seen the difference between the CSS selectors by giving the same CSS properties with different values by selecting an element with different selectors at the same time.
69 Views
