CSS Specificity
CSS Specificity
CSS specificity is an algorithm that determines which style declaration is ultimately applied to an element.
If two or more CSS rules point to the same element, the declaration with the highest specificity will "win", and that style will be applied to the HTML element.
Look at the following examples:
Example
Here, we have specified a red color for <p> elements. Result: The text will be red:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Now, look at next example:
Example
Here, we have added a class selector (named "test"), and specified a green color for this class. Result: The text will be green, because the class selector has higher specificity:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Now, look at next example:
Example
Here, we have added the id selector (named "demo"). Result: The text will be blue, because the id selector has higher specificity:
<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 next example:
Example
Here, we have added an inline style for the <p> element. Result: The text will be pink, because the inline style has the highest specificity:
<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>
CSS Specificity Hierarchy
Each type of CSS selector has a position in the specificity hierarchy, and the selector types carry different "weights".
| Selector | Example | Description | Weight |
|---|---|---|---|
| Inline styles | <h1 style="color: pink;"> | Highest priority, will override all other selectors | |
| Id selectors | #navbar | Second highest priority | 1-0-0 |
| Classes, attribute selectors and pseudo-classes | .test, [type="text"], :hover | Third highest priority | 0-1-0 |
| Elements and pseudo-elements | h1, ::before, ::after | Low priority | 0-0-1 |
| Universal selector and :where() | *, where() | No priority | 0-0-0 |
The declaration with the highest specificity/weight value will be applied to the element.
Example
The specificity hierarchy and weight:
<html>
<head>
<style>
#demo {color: blue;} /* weight: 1-0-0 */
p#demo {color:
orange;} /* weight: 1-0-1 WINS! */
.test {color: green;}
/* weight: 0-1-0 */
p.test {color: green;} /* weight:
0-1-1 */
p {color: red;} /* weight: 0-0-1 */
</style>
</head>
<body>
<p id="demo" class="test">Hello World!</p>
</body>
</html>
More Specificity Examples
Equal specificity: the latest rule wins
If the same rule is written twice in the external style sheet, the latest rule wins:
ID selectors beats attribute selectors
Look at the following code lines - Here, the first rule has higher specificity than the second, and will therefore be applied:
A class selector beats element selectors
A class selector such as .intro beats h1, p, div, etc:
The universal selector (*)
The universal selector (*) has no specificity weight value:
Inline style sheet are more specific than external style sheet
The embedded style sheet is closer to the element to be styled. So in the following situation the last rule will be applied:
Example
/*From external CSS file:*/
#content h1 {background-color: red;}
/*In HTML file:*/
<style>
#content h1 {background-color:
yellow;}
</style>
