CSS Specificity
CSS Specificity helps determine what style will be applied to the HTML element(s) when there are overlapping or multiple CSS rules.It is a value or weight assigned to a CSS selector. The higher the specificity, the more precedence the selector has.
Let’s consider the following code
<html>
<head>
<style>
*{
color: gray;
}
#title{
color: red;
}
.h1{
color: blue;
}
h1{
color: pink;
}
</style>
Here the question is, what color will h1 be assigned to? This is calculated based on the selector’s components which we will discussed in this tutorial.
➡️The Cascade Algorithm
CSS stands for Cascading Stylesheets. The cascade is the algorithm for solving conflicts where multiple CSS rules apply to an HTML element.
Understanding the cascade algorithm helps you understand how the browser resolves conflicts like this. The cascade algorithm has 4 distinct stages.
- Position and order of appearance: the order in which your CSS rules appear
- Specificity: an algorithm that determines which CSS selector has the strongest match
- Origin: the order in which CSS appears and where it comes from, whether that is a browser style, CSS from a browser extension, or your authored CSS
- Importance: some CSS rules are weighted more heavily than others, especially with the
!important
rule type
Lets look into all these one by one
➡️Effect of Position
If there are two rules that have selectors of identical specificity, the last one to be declared won. In an HTML page, you can add styles in different ways: through a <link>
tag, a <style>
tag, or directly in the element's style
attribute. If you have one <link>
tag at the top of your page and another at the bottom, the styles from the bottom one will be used. The same goes for <style>
tags; the ones lower down on the page take priority.
An inline style
attribute with CSS declared in it will override all other CSS, regardless of its position, unless a declaration has !important
defined.
If the browser doesn’t support a property, it is ignored!
➡️Specificity
CSS specificity determines which style rules get applied to an element when there are conflicts. Higher specificity means the style will be used. It’s calculated based on a point system involving inline styles, IDs, classes, and tag names
So, the order of specificity is:
Inline Style > ID Selector > Class or Attribute Selector > Element Selector > Universal Selector
🔥Specificity Calculation
To calculate specificity, assign a value to each part of the selector:
- Universal Selector: 0
- Element selectors and pseudo-elements: 1
- Class selectors, attribute selectors, and pseudo-classes: 10
- ID selectors: 100
- Inline styles: 1000
Here is an example —
<h1 id="title" class="h1">CodeWithHarry</h1>
Here, the specificity value will be 111 because ID has a specificity of 100, the class has a specificity of 10, and the h1 element has a specificity of 1.
In the case of a specificity tie, the rule that appears last in the CSS is applied.
➡️Importance
The !important
flag in CSS is used to give a particular style rule the highest level of importance, overriding any other competing styles. When you add !important
to a CSS rule, it will take precedence over other rules affecting the same element, regardless of their specificity. For example, if you have:
p {
color: red !important;
}
p {
color: blue;
}
An !important
at the end of a CSS value gets a specificity score of 10,000 points. This is the highest specificity that one individual item can get.
🔥Example
What will be the specificity value of the following selector:
a.harryclass.rohan-class[href]:hover {
color: red;
}
Solution
To calculate the specificity value of the selector a.harryclass.rohan-class[href]:hover
, you can break down its components:
- Element selectors:
a
contributes 1 point. - Class selectors:
.harryclass
and.rohan-class
each contributes 10 points, totaling 20 points. - Attribute selector:
[href]
contributes 10 points. - Pseudo-class:
:hover
adds another 10 points.
Add up all these values:
1 (element) + 20 (classes) + 10 (attribute) + 10 (pseudo-class) = 41.
So, the specificity value of the selector a.harryclass.rohan-class[href]:hover
will be 41.