Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.
– MDN
Let’s just forget about CSS specificity for a minute and find the appropriate answer to the following question.
There are two weights in front of you. One weighs 25 kg and another one weighs 50 kg. If both are placed consecutively on the left and right sides of a weight scale, which side will be heavier?
I know, it’s a very tough question but I guess you have already got the answer.
CSS Specificity is nothing but that weight. Every CSS Selector has some kind of weight that can be labeled as Specificity. If one or more selectors point out the same HTML element as the one which has a greater value of specificity, will ultimately be applied to that element.
Let’s go through some examples to dig deeper.
If we declare two different styles to the same tag, then the one declared later will be assigned to the element.
<!DOCTYPE html>
<html>
<head>
<style>
span {
color: blue;
}
span { /* This one is applied */
color: red;
}
</style>
</head>
<body>
<span id="foo">Foo</span>
</body>
</html>As the selectors are the same, the most recent declaration will be applied. So the text’s color will be red.
But if the selectors are not the same then the more specific selector will get preference.
I mean, that’s all Specificity is about, right?
<!DOCTYPE html>
<html>
<head>
<style>
span#foo { /* This one is applied */
color: blue;
}
span {
color: red;
}
</style>
</head>
<body>
<span id="foo">Foo</span>
</body>
</html>So the text’s color will be blue now.
Every selector type has a bigger or smaller specificity value which eventually decides which style will be applicable to the HTML element. If we see the image below, we can get a basic idea of the hierarchy of specificity values of different types of selectors.
If an element has both id and class attribute, then the id attribute will get preference as we can see in the CSS hierarchy and the style declared against the id selector will be applied to the element.
<!DOCTYPE html>
<html>
<head>
<style>
#foo { /* This one is applied */
color: green;
}
.bar {
color: yellow;
}
</style>
</head>
<body>
<span id="foo" class="bar">FooBar</span>
</body>
</html>As there are both id and class selectors present, the id selector will get preference and the text’s color will be green.
I guess you got the pattern now. Similarly, the custom style attribute will get the highest privilege, and the element tag selector and default inherited styles will sequentially get the lower privilege when assigning styles to an HTML element. Let’s have a look at the example below here,
<!DOCTYPE html>
<html>
<head>
<style>
#foo { /* This one is applied */
color: red;
}
.bar {
color: red;
}
span {
color: red;
}
</style>
</head>
<body>
<span id="foo" class="bar" style="color: purple;">FooBar</span>
</body>
</html>
When the inline style attribute is present in an element, the styles declared in the style tag will get the most preferences. As you can see, even after both ID, Class, and element selectors are present and pointing to the same color red, because of the inline style attribute, the text’s color here is purple.
Now the question may arise that does specific selector in CSS has any specific value or not. Well, it does. The table below shows some of the commonly used selector’s specificity values:
| Selector | Specificity Value |
| tag | 1 |
| #id | 100 |
| .class | 10 |
| * | 0 |
While using combined selectors, these values together might change the preference of style for an element but that happens rarely.
Last but not least, sometimes we use !important to force a style towards an element. If possible, don’t do that. This tag will even override inline styles! In large-scale apps, it becomes tough to produce the reason of design-related bugs just because of this thing. Nevertheless, if you have to use !important, then use it at your own risk!
Well, that’s all for now. There is a lot more knowledge available about CSS specificity on the web. I’m going to provide some references below here. If you have any feedback or suggestion, feel free to share them in the comment section. Thanks for your valuable time.
References: