Question

I have this div as part of an include fine:

.connier {
      text-align: left;
      padding-top: 5px;
      padding-bottom: 10px;
      padding-left: 10px;
      background-color:#CCC;
}

and use it thus:

<div id="connier">
  <!--#include virtual="/cover/cover.asp" -->
</div>

But I would like to use same include file on another page but this time, with transparent background but it is still rendering same background.

Here is what I attempted

.connier.the_otherbg {
      text-align: left;
      padding-top: 5px;
      padding-bottom: 10px;
      padding-left: 10px;
      background-color:transparent;
}

<div class="the_otherbg">
  <!--#include virtual="/cover/rents.asp" -->
</div>

what am I doing wrong?

Thanks a lot in advance

Answer 1

Change your CSS to this:

.the_otherbg {
      background-color:transparent;
}

Making sure that it is defined after .connier. You also need to make sure your div has both classes:

<div class="connier the_otherbg">
  <!--#include virtual="/cover/rents.asp" -->
</div>

I would do it this way so that the the_otherbg div inherits any changes to connier. Only define what is different between them. In the future, when you need to change something, you will only need to do it in one place.

Demo: http://jsfiddle.net/CF88G/