In the CSS Selectors lesson, you’ve seen that the same element can be selected in multiple ways. Also, in the CSS Cascade lesson you’ve learned that when more than one style rules are applied to an element then cascading takes place and specificity is one of the main factors that determines which style rules will be applied to that HTML element. In this lesson you’ll learn detail about specificity.
What is CSS specificity
When multiple style rules each with different selectors try to select an HTML element, the style rule that most specifically selects the element wins. CSS specificity is the measurement that tells how specifically a selector selects an element.
CSS provides a formula to calculate specificity of style rules. In the following, you’ll learn how to calculate specificity of style rules.
How to calculate specificity?
Each selector in a style rule has a value. The more value it is, the more specificity the style rule has.The following list shows values of the different selectors –
- A universal selector or a selector that gets style by inheritance has no point.
- A type selector or pseudo-element has 1 point.
- A class selector or attribute selector or pseudo-class has 10 points.
- An ID selector has 100 points.
- An inline style has 1000 points which is the most powerful.
So, when multiple styles try to style one HTML element, then, calculate their selector values. The style rule whose selector gets the biggest number wins and applies its style rules on the element.
Now let’s see some examples of specificity in action below-
Example of CSS specificity
(1) A style rule with a type selector has more specificity than a style rule with universal selector:
HTML
[html]<p class=”red”>This is a paragraph</>[/html]
CSS
[css]p{
color: blue;
}
*{
color: red;
}[/css]
As you can see that both styles are applied to the same p element. Which will win? The first style rule uses type selector which has 1 point and the second style rule uses a universal selector which has no point. So, the first style rule wins and the text inside the paragraph becomes blue.
Output:
This is a paragraph
(2) A style rule with a class selector has more specificity than a style rule with type selector:
HTML
[html]<p class=”red”>This is a paragraph</p>[/html]
CSS
[css].red{
color: red;
}
p{
color: blue;
}[/css]
As you can see that both styles are applied to the same p element. Which will win? The first style rule uses type selector which has 1 point and the second style rule uses a class selector which has 10 points. So, the second style rule wins and the text inside the paragraph becomes red.
Output:
This is a paragraph
(3) A style rule with an id selector has more specificity than a style rule with class selector:
HTML
[html]<p id=”blue” class=”red”>This is a paragraph</p>[/html]
CSS
[css]#blue{
color: blue;
}
.red{
color: red;
}[/css]
As you can see that both stylesare applied to the same p element.Which will win?The first style rule uses an ID selector which has 100 point and the second style rule uses a class selector which has 10 points. So, the first style rule wins and the text inside the paragraph becomes blue.
Output:
This is a paragraph
(4) Inline style rule winsover any other style rules:
HTML
[html]<p id=”blue” class=”red” style=”color:green”>This is a paragraph</p>[/html]
CSS
[css]#blue{
color: blue;
}
.red{
color: red;
}[/css]
As you can see that all the styles in the CSS are applied to the same p element. Which will win? The first style rule in the CSS uses an ID selector which has 100 point and the second style rule uses a class selector which has 10 points. But, as the inline style rule has 1000 points, so, the style rule declared as inline style wins and the text inside the paragraph becomes green.
Output:
This is a paragraph
(5) In a grouping selector, calculate point for each comma separated selector individually:
HTML
[html]<h1 class=”orange”>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>[/html]
CSS
[css]h1, h2, h3, h4{
color: green;
}
.orange{
color: orange;
}[/css]
The first style is a grouping selector and as each one is a type selector individually, it has 1 point separately. The second style rule uses a class selector which has 10 points and it is applied to the h1 element.So, the second style rule wins and the text inside h1 element becomes orange.
Output:
This is heading 1
This is heading 2
This is heading 3
This is heading 4
Specificity applies to the conflicting properties only
Specificity applies to the conflicting properties only, not the other properties declared in the styles. See the example-
HTML
[html]<p class=”red”>This is a paragraph</p>[/html]
CSS
[css].red{
color: red;
}
p{
color: blue;
font-style: italic;
}[/css]
Both styles above are applied to the p element. But, as class selector has more points than the type selector, so all the properties are taken from the class selector that are also existed in the type selector. Here, the output text color becomes red. But, as font-style property only existed in the type selector, it is taken from here as though type selector has lower specificity than the class selector and applied in the final output and hence the text also becomes italic. See the following text.
Output:
This is a paragraph
Dos and Don’ts of CSS Specificity
1. Try to keep selector as short possible to select an element. Don’t
2. Always try to avoid using ID selectors. As an ID selector has lot more points than the any other selector, it is not easy to override an ID selector by another selector even you need to be