Specificity: Specificity describes about the priority of selector in CSS. Before working with CSS it is good to know about specificity. Because if the page contains few CSS selectors, then it is fine. But if we are dealing with a page which contains many CSS selectors, then we might confuse. For example, if i give red color to a particular div/block in CSS, the parent of this div/block may be black. So sometimes the parent selector might override the child selector. This will result the div color as black even though we have given red color. Here i am trying to explain CSS specificity with different examples.
CSS Syntax:
Selector
{
Property : Value;
}
Different Selectors in CSS:
1) All HTML Elements
2) ID
3) Class
Example 1:
<html>
<head>
<style>
p
{
color:red;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Output:
Hello World!
In the above example, we have used the html element 'p' as selector. We have given red color to that element. Now observe the second example.
Example 2:
<html>
<head>
<style>
.test
{
color:green;
}
p
{
color:red;
}
</style>
</head>
<body>
<p class='test'>Hello World!</p>
</body>
</html>
Output:
Hello World!
In the second example i have used class called 'test' and i have given green color to this class. Now the text will be in green color, even though we have give red color through html element 'p' , the class selector will be given high priority. Due to this we are seeing the output text in green color. Now Observe the third example.
Example 3:
<html>
<head>
<style>
#demo
{
color:yellow;
}
.test
{
color:green;
}
p
{
color:red;
}
</style>
</head>
<body>
<p id='demo' class='test'>Hello World!</p>
</body>
</html>
Output:
Hello World!
In the above example i have used the Id called 'demo' . So now the priority is given to the Id. So the output will be in yellow color. Now observe the fourth example.
Example 4:
<html>
<head>
<style>
#demo
{
color:yellow;
}
.test
{
color:green;
}
p
{
color:red;
}
</style>
</head>
<body>
<p id='demo' class='test' style='color: blue'>Hello World!</p>
</body>
</html>
Output:
Hello World!
In the above example i have used inline styles. So inline style will be given highest priority. Hence the output will be in blue color. So now we know the priority among html elements, id, class and inline styles.So how to know the priority of a selector? . If the selector contains single element, we can easily know the priority with this knowledge. But if the selector contains multiple elements then it is difficult to know the priority. Here i will explain the technique to calculate the specificity or priority of a selector.
Technique to calculate specificity :
Technique to calculate specificity :
When calculating specificity of a selector, we need to use the above three digits. If the selector contains ID and Class, then we need to place the count of these occurrences in those digits. If the selector does not contain html element then we need to place 0 in the 1st digit. Here i will give examples of specificity for different combinations.
Examples:
1) P#demo Specificity = 1 0 1
In the above example specificity is 101. Because it contains one id. So in 3rd place we will put 1. It does not contain any class, so i am keeping 0 in 2nd digit. It contains html element 'p'. So in 1st digit, i have put 1.
2) P#demo.test Specificity = 1 1 1
3) #demo Specificity = 1 0 0
4) .test Specificity = 0 1 0
5) p Specificity = 0 0 1
6) #sample p#demo Specificity = 2 0 1
In the above example it contains total 2 Ids. So we have to put 2 in 3rd digit.
7) div#sample p#demo Specificity = 2 0 2
In the above example it contains total 2 Ids. So we have to put 2 in 3rd digit. And it contains total 2 html elements. So we have to keep 2 in 1st digit.
Question: Which of the above 7 has highest specificity or priority?
Ans: div#sample p#demo
Because 202 is the highest value among 7 examples.
Tip: If you are too lazy to calculate the specificity using the above technique, you can simply use '!important' to a value of a property. So this will be given highest priority.
Example:
1) p
{
color:red !important;
}
2) p#demo
{
color:green;
}
In the above two examples, the 1st example is given highest priority even though it has less specificity than 2nd example. So when the page contains too many selectors, then we can use this key word '!important'. So that we no need to worry about other selectors.
