Question

Possible Duplicates:
How do I prevent CSS inheritance?
is there a way to exclude a tag from css class

I have CSS like this

.div1 img {
  // ...
}

.myimg {
  // ...
}

and my HTML code is like this,

<div class="div1">
    ...
    <img src="..." class="myimg">      // image html
    ...
</div>

The css formatting defined in .div1 img is obviously applied to the image html code. However, I actually don’t want it happen. What can I do to not to have ‘.div1 img’ effects on that image html code? I don’t want to modify the content of div1 img or related html code because it is used in other places already (and it is a template code that I don’t want to mess with).

P.S. I cannot remove or modify <div class="div1"> either because there is other template code around.

Thanks.

Answer 1

You have two options:

1. You can explicitly override all of the styling defined in .div1 img with what they should be in .myimg
2. You can write .div1 img:not(.myimg) for the first rule.