HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will "win", and its style declaration will be applied to that HTML element
If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will "win", and its style declaration will be applied to that HTML element.
Think of specificity as a score/rank that determines which style declaration are ultimately applied to an element.
Look at the following examples:
In this example, we have used the "p" element as selector, and specified a red color for this element. The text will be red:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Now, look at example 2:
In this example, we have added a class selector (named "test"), and specified a green color for this class. The text will now be green (even though we have specified a red color for the element selector "p". This is because the class selector is given higher priority:
<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:
In this example, we have added the id selector (named "demo"). The text will now be blue, because the id selector is given higher priority:
<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:
In this example, we have added an inline style for the "p" element. The text will now be pink, because the inline style is given the highest priority:
<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>
Every CSS selector has its place in the specificity hierarchy.
There are four categories which define the specificity level of a selector:
Memorize how to calculate specificity!
Start at 0, add 100 for each ID value, add 10 for each class value (or pseudo-class or attribute selector), add 1 for each element selector or pseudo-element.
Note: Inline style gets a specificity value of 1000, and is always given the highest priority!
Note 2: There is one
exception to this rule: if you use the !important
rule, it will even override inline styles!
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) |
Consider these three code fragments:
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>
The specificity of A is 1 (one element selector)
The specificity of B is
101 (one ID reference + one element selector)
The specificity of C is 1000 (inline styling)
Since the third rule (C) has the highest specificity value (1000), this style declaration will be applied.
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
the first rule is more specific than the other two, and will therefore be applied.
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.