In this article we're going to learn about the specificity in CSS.
What is Specificity?
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.
Let's checkout specificity example on codepen 👇
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.
Conclusion
Thanks for reading this out. Please feel free to leave your comments and follow for more interesting and educative posts.
If you liked this post then you can buy Me, My first coffee ever. Thanks in advance.🙂
Happy coding!
Top comments (4)
Hi Pinky,
Please take this comment the right way but I am not sure what this post was trying to say - probably me. I think it would have been more useful to provide the reader with a guide as to how to calculate specificity. I tried to do this in my codepen some time ago.
Since then CSS layers have become established in most browsers, which complicate things further.
My best regards.
Hey TGJ Gilmore! Taking your feedback, I made some changes in my post by adding ' How to calculate specificity ' section you can check it out.
Thanks.
Great article, keep the good work! Liked and followed! 🚀
Hey AI - Naubit, I hope you are doing well. Much appreciated. Thanks for your great support.