I am working on a wordpress theme. I have some styles for img set way at the top of my css. Way at the bottom of my css I set some new styles for img that are inside a div with class tooltip. For some reason, the styles at the bottom refuse to behave unless I add !important. Will this hurt my code by adding a few of these? I know !important needs to be used sparingly.
Thanks for the article. I understand your point but my code should be working without !important. There is no reason that I can find for it not to work. I found the css that is setting the rules and do to the cascading nature of css, the rules at the bottom should have priority bur for some reason, it's not working here. I tried all kinds of specificity.
In terms of specificity, I'm assuming you're referring to the CSS specificity hierarchy. Use your bowser's web inspector and make sure that your CSS isn't being overridden by anything that is more specific to the elements that you are trying to style. I found a great article here that has the hierarchy in it.
And then of course there's always the reduced test case.
As for my opinion, I put !important's all over my website whenever something else gets in the way. The only reason I would suggest not to use important, is because you want to make sure that the elements you are styling are able to be overridden by different styles in the future, say if you want to add something to some of the elements, but not all. Not so easy to do if there's an !important...
I try to use !important very sparingly, usually only when a CMS adds styling to the HTML though. !important can be dangerous and problematic and should be the last option since it's basically a CSS nuclear bomb.
Try as best as possible to make specific CSS work for you. Definitely post a test case as the guys have, if the code is more specific yet not being styled correctly there may be another problem.
It could be an inline style that is over riding it. Inspect your site with firebug.
Just inspect that element and see exactly where the style is coming from.
I am working on a wordpress theme. I have some styles for img set way at the top of my css. Way at the bottom of my css I set some new styles for img that are inside a div with class tooltip. For some reason, the styles at the bottom refuse to behave unless I add !important. Will this hurt my code by adding a few of these? I know !important needs to be used sparingly.
I wrote an answer on Quora recently in regards to
!important: http://qr.ae/8Q9RCThanks for the article. I understand your point but my code should be working without !important. There is no reason that I can find for it not to work. I found the css that is setting the rules and do to the cascading nature of css, the rules at the bottom should have priority bur for some reason, it's not working here. I tried all kinds of specificity.
Mind sharing a reduced test case for me to have a look at?
In terms of specificity, I'm assuming you're referring to the CSS specificity hierarchy. Use your bowser's web inspector and make sure that your CSS isn't being overridden by anything that is more specific to the elements that you are trying to style. I found a great article here that has the hierarchy in it.
And then of course there's always the reduced test case.
As for my opinion, I put
!important's all over my website whenever something else gets in the way. The only reason I would suggest not to use important, is because you want to make sure that the elements you are styling are able to be overridden by different styles in the future, say if you want to add something to some of the elements, but not all. Not so easy to do if there's an!important...Hope this helps.
I try to use !important very sparingly, usually only when a CMS adds styling to the HTML though. !important can be dangerous and problematic and should be the last option since it's basically a CSS nuclear bomb.
Try as best as possible to make specific CSS work for you. Definitely post a test case as the guys have, if the code is more specific yet not being styled correctly there may be another problem.
It could be an inline style that is over riding it. Inspect your site with firebug. Just inspect that element and see exactly where the style is coming from.