re: CSS Specificity and the use of !important: a case study VIEW POST

VIEW FULL DISCUSSION
 

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

 

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!

 

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

code of conduct - report abuse