Child Selectors

[dregs33]

Hi

I have a style that I use for all my content boxes

.ConBox {
border: 1px solid #999999;
margin-bottom: 3px;
}
.ConBoxDesc {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
background-color: #999999;
width: 100%;
padding-left: 2px;
}
.ConBoxTitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
background-color: #CCCCCC;
width: 100%;
text-align: center;
}

Is there a way I can inherit from these styles and just change the any of the colours.

So I call these styles as follows

<div class="ConBox">
<div class="ConBoxTitle">Title here</div>
</div>

What I really want is the ability to call the general style just change the colour.

Sorry for the basic question but I've searched quite a few places and can't come up with the answer.

dregs33

[jetboy]

A number of options:

<div class="ConBoxTitle" style="color="#F00;">Title here</div>

An inline style overrides any other styles.

.redtitle { color: #F00; }

<div class="ConBoxTitle redtitle">Title here</div>

Any rules in the second class will override those in the first.

Knowing that you can use multiple classes on a single element, and presuming the aim is to cut down the amount of code, you could try something like this:

.conbox {
border: 1px solid #999999;
margin-bottom: 3px;
}

.conbox .title, .conbox .desc { /* or use .conbox div to style *all* divs inside conbox */
width: 100%;
font: bold 14px Helvetica, sans-serif; /* condenses font declarations */
}

.conbox .title {
text-align: center;
background-color: #CCCCCC;
}

.conbox .desc {
padding-left: 2px;
background-color: #999999;
}

<div class="conbox">
<div class="title">Title here</div>
<div class="desc">Title here</div>
</div>

Nothing to do with child selectors, but hopefully this points you in the right direction.