CSS Specificity: What happens when an element is targeted by multiple rules, with various selectors, that affect the same property?
In this tutorial, you will learn-
In this article, you will learn-
What is Specificity?
In case there are two or more conflicting CSS rules that highlight a similar element, the browser follows some rules to figure out which one is generally explicit and therefore wins out.
Consider specificity as a score/rank that determines which style declarations are eventually applied to an element.
The universal selector (*) has low particularity, while ID selectors are exceptionally specific!
Note: Specificity is a typical reason why your CSS-rules don’t apply to some elements, although you think they ought to.
Specificity Hierarchy
Every selector has its spot in the particularity hierarchy. There are four classes which characterize the specificity level of a selector:
Inline styles – An inline style is connected straightforwardly to the element to be styled. Example: <h1 style=”color: #ffffff;”>.
IDs – An ID is a special identifier for the page elements, for example, #navbar.
Classes, attributes and pseudo-classes – This classification includes .classes, [attributes] and pseudo-classes, for example, :hover, :focus and so on
Elements and pseudo-elements– This classification includes element names and pseudo-elements, for example, h1, div, :previously and :after.
How to Calculate Specificity?
Memorize how to calculate specificity!
Start at 0, add 1000 for style property, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element.
Consider these three code parts:
Example
A: h1 B: #content h1 C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
The specificity of A is 1 (one element)
The specificity of B is 101 (one ID reference and one element)
The specificity of C is 1000 (inline styling)
Since 1 < 101 < 1000, the third rule(C) has a greater level of specificity, and thusly will be applied.
Specificity Rules
Equal specificity: the latest rule counts – If a similar principle is written twice into the external style sheet, then, at that point, the lower rule in the style sheet is closer to the element to be styled, and consequently will be applied:
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
the latter rule is constantly applied.
ID selectors have a higher specificity than attribute selectors – Look at the accompanying three code lines:
Example
<!DOCTYPE html>
<html>
<head>
<style>
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
</style>
</head>
<body>
<div id="a">This is a div</div>
</body>
</html>
the first rule is more explicit than the other two, and will be applied.
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 accompanying circumstance
Example
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {
background-color: yellow;
}
</style>
the latter rule will be applied.
A class selector beats any number of element selectors – a class selector, for example, .introduction beats h1, p, div, and so forth:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.intro {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1 class="intro">This is a heading</h1>
</body>
</html>
The universal selector and inherited values have a specificity of 0 – *, body * and similar have a zero particularity. Inherited values likewise have a specificity of 0.
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
