DEV Community

Discussion on: CSS Specificity and the use of !important: a case study

Collapse
 
arunsathiya profile image
Arun • Edited

This is an excellent article! Until recently, I had been extensively using !important on my code as well and one of my colleagues taught the importance of using specificity.

A quick tip that helps me a lot when I want to target a specific element for writing CSS, is to right-click on that element's HTML element on the browser dev tools, and then use Copy -> Copy selector.

For example, in the image attached below, it gives me this CSS selector: #article-body > p:nth-child(43)

This feature on the browser has helped me numerous times when I want to target specific elements strictly.

Image showing how to target an element's CSS selector using browser dev tools
Image link: cld.wthms.co/Y8ORoK

Collapse
 
munamohamed94 profile image
Muna Mohamed

Thank you Arun, I'm glad you enjoyed the post! I was the same, using !important excessively but no more! Once you learn about specificity and !important, it makes it difficult to willingly use it without thinking twice about it.

Thank you for the tip - I haven't used that feature before but I can definitely see its uses!

Collapse
 
moopet profile image
Ben Sinclair

That's a useful trick... but in your example it's only useful if the page content or theme never changes, because you can't guarantee your highlighted paragraph is going to be the forty-third forever...