Here is an example of what I have:
<div class="node node-blog">
<div class="field-item even">
<img src="image.png"/>
</div>
</div>
What I would like to do is apply a style to the img element only when inside the node-blog and field-item divs, but this does not work:
.node-blog .field-item img {float:right;}
Sure I am doing something wrong.
Thanks.
Unless you have other errors in your CSS file, this line seems correct. It's most probably something very stupid. Maybe some typo in your actual code if you haven't actually copy-pasted it here...
As long as your img is contained within a subtree of .field-item that is in a subtree of .node-blog this should work. You don't have to provide the whole path.
Unless you have a different rule on img that sets float to it. CSS style of it
!important.you could try:
.node-blog .field-item img {float:right!important;}
...another rule may be more selective
!important is good for diagnosing the problem, and since there was nothing wrong with the code provided in the question, diagnosis (this answer) was the best place to start. But as @david said, you really aren't going to want to use !important to "solve" the problem unless you're excited about future headaches.All else being equal, it should work. The problem is in a piece of code you aren't sharing with us.
!important trick should just as well work. Have you checked which style definition overrode yours? If it works with the complete path then something else has been overriding it that was more exact over your definition.!important is something of a sledgehammer, and you can't double !important something. It is almost always better to write selectors that are specific enough to override anything you want to override.