How do I override div? - css

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/

Answer 2

I think all you should do is this:
.connier {
text-align: left;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 10px;
background-color:#CCC;
}
.transparent
{
background-color: transparent!important;
}
Remember we are working with CASCADING style sheets (CSS), so it is important that the transparent class is found UNDER the other class, if not, use the '!important' (this should not be used frequently though!).
Also note that the 'class=' attribute is used in div. To bind some css to a div using the 'id', then the class should be like '#myDivId' (in my opinion this is less usable)
For your normal div use:
<div class="connier"></div>
and for your other div use: (the div will have two classes at the same time)
<div class="connier transparent"></div>
This way you can make your css much more usable and maintainable.
Hope this cleared it up a bit

Answer 3

Well I'd love to know how the first one works if you're using a class selector to target a div that is marked by its ID, but never mind that.
The second selector is targeting elements that have both the classes connier and the_otherbg, whereas the element you want to target only has the_otherbg. Try just removing the .connier from the selector.