What are CSS specificity rules
This article about, what is CSS specificity rules and how to calculate easily.
What is CSS specificity?
Specificity is the value calculated by examining the selector part of a CSS rule set. It is used to determine which selector is more specific than other selector CSS.
Syntax of CSS rule set
selector {
declaration list; }We know the syntax of the CSS rule set, that is we write a selector it may be a tags selector, class selector, ID selector, combination selector, or group selector. In the curly braces, we put the declaration list. By seeing the selector part you can see you can tell the selector is more specific than other selectors or something like that. If the calculated specificity of a selector gets more points then that selector is considered more specific, so remember more specific selector wins over the less specific selectors.
How to calculate CSS specificity rules
The CSS specificity for a selector is determined by five important positions.
| Selector | Specificity |
|---|---|
| important | (1,0,0,0,0) or 10,000 points |
| Inline style | (0,1,0,0,0) or 1,000 points |
| ID Selector | (0,0,1,0,0) or 100 points |
| Class selector, Attribute selector(type), Pseudo class | (0,0,0,1,0) or 10 points |
| Element selector, Pseudo element | (0,0,0,0,1) or 1 point |
- If you have one “!important” in the CSS rule set, you put 1 in the first position and put the remaining positions 0 as in the above table.
- Similarly, If you have an “inline style” in the CSS rule set, you put 1 in the second position and put the remaining positions 0.
- If you have an “ID selector” in the CSS rule set, you put 1 in the third position and put the remaining position 0.
- If you have a “Class selector or Attribute selector or Pseudo class” in the CSS rule set, you put 1 in the fourth position and put the remaining positions 0.
- Similarly, If you have an “Element selector or Pseudo element” in the CSS rule set, you put 1 in the fifth position and put the remaining positions 0.
That is How you can calculate specificity. The highest specificity is given to !important because it has 10,000 points as in the above table.
Example of Specificity
| Ex. | !important | Inline Style | ID Sele. | Class Sele. | Element Sele. |
|---|---|---|---|---|---|
| p{color:red !important} | 1 | 0 | 0 | 0 | 0 |
| style=”color:red” | 0 | 1 | 0 | 0 | 0 |
| p#id{color:red} | 0 | 0 | 1 | 0 | 1 |
| p.class{color:red} | 0 | 0 | 0 | 1 | 1 |
| p{color:red} | 0 | 0 | 0 | 0 | 1 |
See the first line, it is created by the element selector and it has !important in the CSS. If I have to calculate the specificity for this selector ‘P’, we put 1 in the position of !important, we put 1 in the position of an element selector, and put 0 in the remaining position.
Example codes for Specificity
Element selector
<html>
<head>
<title> Specificity </title>
<style type="text/css">
p{
background-color: red;
}
</style>
</head>
<body>
<p >Paragraph 1</p>
</body>
</html>Result:
In the above code, we have one paragraph of text. The <style> tag selects p using element selector, within the flower bracket it has a background-color “red”. It sets the background color for all paragraphs on this page. The specificity for the selector is (0,0,0,0,1) and 1 point, because we have one element selector so, put 1 and the remaining put 0.
Two element selector
p{
background-color: red;
}
body > p{
background-color: green;
}Result:
The above code has two element selector “body > p”. It has the background color “green”. You can observe, that it has two element selectors. This means that if the body element has a direct child p, set green background to it. The specificity for the selector is (0,0,0,0,2) because we have two HTML elements. And also you observe this has more specificity than the ‘p’ selector. If you place the code, above or below it wins.
Class selector Specificity
p{
background-color: red;
}
body > p{
background-color: green;
}
.blue{ /*(0,0,0,1,0) */
background-color: blue;
}Result:
The above code has one class selector “.blue“. The P tag has a class “blue”, so i have selected the paragraph using the class selector. It has the background color “blue” The specificity for this selector is (0,0,0,1,0) because we have only one class selector here, so put 1 in 4th position. You can observe this selector has the highest specificity than the ‘p’ and ‘body>p’ selector. Hence, see the output the background is changed to blue. Even though this CSS rule set is very far away from this paragraph still it is going to win because this has the highest specificity it has 10 points.
ID selector Specificity
p{
background-color: red;
}
body > p{
background-color: green;
}
.blue{
background-color: blue;
}
#orange{ /*(0,0,1,0,0). */
background-color: orange;
}Result:
The above code has one ID selector “#orange” and It has an orange background color. The paragraph has Id and value as “orange”. It has 1 ID selector, we write 1 in the third position, So the specificity for this selector is (0,0,1,0,0) and 100 points. See, the above output the background is changed to orange.
Inline style
<p style=" background-color: skyblue;">Paragraph 1</p>Result:
In the above code, the inline style means using a style attribute. And the style attribute has a sky blue background color. The specificity for this selector is (0,1,0,0,0).See the above output we have a sky blue bg-color because the inline style has 1000 points. It is the highest specificity than Id, class, and element selector.
!important
p{
background-color: red; !important
}
body > p{
background-color: green;
}
.blue{
background-color: blue;
}
#orange{
background-color: orange;
}
<p style=" background-color: skyblue;">Paragraph 1</p>Result
Any selector that has “!important” in the property will have the highest priority than ID or Class selector or inline style. In the above code, the element selector has !important, so it is a high priority than all. See, the output displays red background color. !important have 10,000 points specificity and element selector have 1 point, it has totally of 10001 points.
Note:
- Try to reduce the specificity of a selector.
- Never use !important until and unless it is necessary. If you don’t have any other selector to modify the style for an HTML element at that time you can use “!important”.
The rules of cascade include
- More specific selectors’ properties override less specific selectors’ properties.
- Nearest properties override farthest properties when specificity is equivalent.
- Finally, for every tag, a virtual declaration list is created by combining all properties from all selectors.
Conclusion
I hope you guys have understood, what is CSS specificity rules and how to calculate, where you put what values, and how you determine which style is going to be applied to an HTML element.