9

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.

Community
  • 1
  • 1
Joe Huang
  • 6,296
  • 7
  • 48
  • 81
  • Yes, the "not selector" works, but I would prefer some solution that also supports IE. So I guess overriding it might be the only solution – Joe Huang Jul 05 '11 at 16:55

5 Answers5

15

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.
rockerest
  • 10,412
  • 3
  • 37
  • 67
2

You could do:

.div1 img:not(.myimg) {
  // ...
}

:not selector explained here

Nicola Peluchetti
  • 76,206
  • 31
  • 145
  • 192
2

There is a nice little not selector that would work, but unfortunately it doesn't work in all browsers.

One sure way to do that is redefine all your .div1 styles in your child .mying class so it overrides the parent.

here is a little demo in jsfiddle: http://jsfiddle.net/u6MnN/1/

mess around with it and see what's best for you.

iamserious
  • 5,385
  • 12
  • 41
  • 60
0

you need to neutralize all those stylings you are giving to ".div1 img" for example if you say "width:100px" there you need to say "width:auto" in the other one.

Although if you have lots of rules in the first set it would be very dirty this way and you need to change your layout.

Mo Valipour
  • 13,286
  • 12
  • 61
  • 87
0

If you have img tags inside a container div with class .div1 they will of course get the styling you define in .div1 img, but if you want lets say 2 images out of 8 in that div to have another style (which i believe is why you made class .myimg), you need to put !important after the defined stylings in .myimg like so:

.div1 img
{
    height: 125px;
    width: 125px;
}
.myimg
{
    height: 150px !important;
    width: 150px !important;
}

This is only if you are NOT using CSS 3.0