CSS Specificity
What is Specificity?
The selector with the highest specificity value will “win” and its style declaration will be applied to the HTML element if two or more CSS rules point to the same element.
Consider specificity as a rating or score that finally dictates which style declaration is applied to an element.
Take a look at these instances:
Example 1
In this example, we have designated a red color for the “p” element, which we have used as a selector. It will be written in red:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Now, look at example 2:
Example 2
In this example, a class selector called “test” has been added, and the color green has been assigned to it. Even if we gave the element selector “p” a red color, the text will now be green. This is because a higher priority is assigned to the class selector:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Now, look at example 3:
Example 3
We have included the id selector (called “demo”) in this example. The id selection has been given a higher priority, resulting in the text becoming blue:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello World!</p>
</body>
</html>
Now, look at example 4:
Example 4
For the “p” element in this example, we have applied an inline style. Since the inline style has the highest priority, the text will now be pink:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test" style="color: pink;">Hello World!</p>
</body>
</html>
Specificity Hierarchy
In the specificity hierarchy, each CSS selector has a defined place.
The specificity level of a selector is defined by four categories:
- Inline styles – Example: <h1 style=”color: pink;”>
- IDs – Example: #navbar
- Classes, pseudo-classes, attribute selectors – Example: .test, :hover, [href]
- Elements and pseudo-elements – Example: h1, ::before
How to Calculate Specificity?
Learn how to compute specificity by heart!
Beginning at zero, add 100 for each ID value, ten for each class value (or pseudo-class or attribute selector), and one for each pseudo-element or element selector.
Note 1: Inline style is prioritized over all others and has a specificity value of 1000!
Note 2: There is one exception to this rule: the!important rule overrides inline styles if it is used!
The table below shows some examples on how to calculate specificity values:
| Selector | Specificity Value | Calculation |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (the universal selector is ignored) |
The winner and active selector will be the one with the highest specificity value!
Examine these three snippets of code:
Example
A: h1
B: h1#content
C: <h1 id="content" style="color: pink;">Heading</h1>
A’s specificity (one element selection) is 1.
B’s specificity is 101 (one element selection plus one ID reference).
C’s specificity (inline styling) is 1000.
This style declaration will be used since rule C has the highest specificity value (1000).
More Specificity Rules Examples
Equal specificity: the most recent rule prevails – The most recent rule prevails if the same rule appears twice in the external style sheet.
Example
h1 {background-color: yellow;}
h1 {background-color: red;}
The specificity of ID selectors is higher than that of attribute selectors. Examine the next three lines of code:
Example
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
Since the first rule is more precise than the other two, it will be followed.
Contextual selectors are more specific than a single element selector – The embedded style sheet is closer to the element to be styled. So in the following situation
Example
/*From external CSS file:*/
#content h1 {background-color: red;}
/*In HTML file:*/
<style>
#content h1 {background-color: yellow;}
</style>
Any number of element selectors can be defeated by a class selector; for example,.intro beats h1, p, div, and so on.
Example
h1 {background-color: yellow;}
h1 {background-color: red;}A.intro {background-color: yellow;}
h1 {background-color: red;}
the latter rule will be apAThe specificity of the universal selector (*) and inherited values is 0 – It means that they are disregarded!plied.
