DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Pinky Lalwani
Pinky Lalwani

Posted on • Updated on

Learn about Specificity in CSS

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.🙂

Buy Me A Coffee

Happy coding!

Top comments (4)

Collapse
 
tracygjg profile image
TGJ Gilmore

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.

Collapse
 
pinkylalwani profile image
Pinky Lalwani Author

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.

Collapse
 
naubit profile image
Al - Naubit

Great article, keep the good work! Liked and followed! 🚀

Collapse
 
pinkylalwani profile image
Pinky Lalwani Author

Hey AI - Naubit, I hope you are doing well. Much appreciated. Thanks for your great support.

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.