INTRODUCTION
Hey there guys! This is me reporting from my room lol. It has been a rollercoaster of emotions, stress, backache and hair loss. I am proud of my progress so far. Still learning the CSS basics and today I remembered I have a dev account which has been idle for a while. I wanted to write this short blog post to summarize what I learnt today. I learnt about CSS specificity. I was struggling to understand it earlier on but I finally got a hold on it. This post is for you if you think the concept of CSS specificity is too difficult to understand, or you're sort of confused about what it is. This isn't an in-depth theory on it, but a simplified summary of what I have learnt on it.
CSS SPECIFICITY
The CSS specificity is basically a set of rules in CSS that is used when there are two or more conflicting CSS rules that point to the same element. The browser has some rules to determine which of the elements is most specific and therefore wins out. Its almost like a rank or hierarchy that determines which of the conflicting styles would be applied to an element.
The universal sector (*) has low specificity, while ID selectors are highly specific. Due to specificity, some CSS rules don't apply to some elements, even if you think they should.
SPECIFICITY HIERARCHY
There are levels or ranks to specificity;
🔽 Inline styles: They are CSS styles that are attached to elements directly. For example; <h3 style="font-style:Arial;>".
🔽 IDs: They are special identifiers for elements. For example, #heading.
🔽 Pseudo-classes, Attributes and Classes: This includes pseudo-classes a:link, Attributes a[target="_blank"] and classes .navbar.
🔽 Elements and Pseudo-elements: This includes elements <div> and pseudo-elements :before.
This hierarchy shows that CSS specificity would prioritize an inline class over an ID or class. Lets look at a simple example below;
<!Doctype html>
<html>
<head>
<style>
/* THIS IS A CLASS */
.heading {
color:blue
}
/* THIS IS A HEADING */
#heading {
color:black
}
</style>
</head>
<body>
<!-- THIS IS AN INLINE STYLE -->
<h1 id='heading' class='heading' style="color:green;">HELLO WORLD</h1>
</body>
</html>
The code above would be displayed as this;
As we can see clearly, the color of the font is green because of CSS specificity. Basically this is how it works. The easiest way to understand this properly is just by putting the ranks into memory (Inline styles > IDs > Classes, attributes and pseudo-classes > Elements and pseudo-elements).
CALCULATING SPECIFICITY
1️⃣ The first thing you should do is to start at 0.
2️⃣ You add 1000 for an INLINE STYLE.
3️⃣ You add 100 for an ID.
4️⃣ You add 10 for each CLASS or PSEUDO-CLASS.
5️⃣ You add 1 for each ELEMENT and PSEUDO-ELEMENTS.
Lets take another example to make it simpler to grasp;
A: h4
B: #heading h4
C: <div id="heading"><h4 style="color: #ffffff">Hello World</h4></div>
To calculate the specificity of the code above, you have to look at the steps listed earlier:
📌The specificity of A is 1. This is because, we add 1 for every ELEMENT (h4 is the element in question) and PSEUDO-ELEMENT.
📌The specificity of B is 101. This is because there is an ID(#heading) and an Element(h4). When you look at the steps above, an ID is 100 and an ELEMENT is 1. So (100 + 1= 101)
📌The specificity of C is 1000. This is because, it includes an inline styling (They amount to 1000, which gives them the highest ranking and that would be applied).
SPECIFICITY RULES
📌First rule: There is something known as the 'equal specificity'. This means the LATEST RULE COUNTS. If the same rule is written twice in an external style sheet, the lower rule (latest) will be applied. For example;
h4 {
color: purple;
}
h4 {
color: yellow;
}
The font color of the heading would be yellow.
📌Second rule: ID selectors have a higher specificity than attribute selectors.
div#img {
margin:0;
}
#img {
margin:0;
}
div[id=img] {
margin:0
}
The first rule will be applied in this situation because it is more specific than the other two.
📌Third rule: Contextual selectors are more specific than a single element selector.
/* from external CSS file */
#heading h4 {
color:black;
}
<!-- in the html file -->
<style>
#heading h4 {
color: yellow;
}
</style>
The latter rule will be applied.
📌Fourth rule: A class selector beats any number of element selectors. A class selector such as .heading, <p> or <div>.
📌Fifth rule: The universal selector (*) and inherited values have a specificity of 0.
CONCLUSION
That is all for today! I hope you enjoyed today's topic and has helped in a way or two. Thanks for reading.
Top comments (2)
Nice work!
Thanks!