css conditional upon another css?

**translatum.gr** · 03-08-2007, 03:02 AM

Basically, I want to have a different quote style for
.windowbg
.windowbg2

(You can see the quote at work here: http://www.translatum.gr/forum/index...ic,8179.0.html)

I use the one below as a quote style but what i want is to be able to define a different image depending on the alternating window style (so that the upper left corner of the image matches that of the background). I did try with transparency but it showed the quote style background colour instead.

Code:

.quote {
    display: block;
    font-style: italic;
    background: #9bb3d0 url( "http://www.translatum.gr/forum/Themes/babylon/images/quote_corner.png" ) 0 0 no-repeat;
    color: #000;
    padding: 10px;
    padding-left: 50px;
    margin:  15px 0;
}

Code:

/* Alternating backgrounds for posts, and several other sections of the forum. */

.windowbg
{   color: #000000;
   background-color: #E1E1E1;
}
.windowbg2
{
   color: #000000;
   background-color: #F0F0F0;
}

**chrishirst** · 03-08-2007, 03:21 AM

Use descendants

Code:

element.windowbg .quote {
/*the properties that need to be different for this quote style go in here */
}
element.windowbg2 .quote {
/*the properties that need to be different for quote style 2 go in here */
}

**translatum.gr** · 03-08-2007, 04:03 AM

Yep, tried it, but did not work, perhaps I am missing something:

Full css: http://www.nonsmokersclub.com/forum/...ault/style.css
Test URL: http://www.nonsmokersclub.com/forum/...04.html#msg104

.windowbg
{
color: #000000;
background-color: #ECEDF3;
}

element.windowbg .quote {
color: #000000;
background-color: #D7DAEC;
border: 1px solid #000000;
margin: 1px;
padding: 1px;
font-size: x-small;
line-height: 1.4em;
}

.windowbg2
{
color: #000000;
background-color: #F6F6F6;
}

element.windowbg2 .quote {
color: #aeeffa;
background-color: #aaeffC;
border: 5px solid #0e0ff0;
margin: 5px;
padding: 5px;
font-size: small;
line-height: 2.4em;
}

**chrishirst** · 03-08-2007, 04:11 AM

You do need to replace [element] with the appropriate container element type.

ie:
div.window
p.window
td.window

**translatum.gr** · 05:27 AM

Edit: Indeed, it works!

Thank you for you reply and pardon my ignorance

In the html I can see

Code:

<td class="windowbg" valign="middle"><img src="http://www.nonsmokersclub.com/forum/index.php?action=dlattach;attach=3;type=avatar" alt="" class="avatar" border="0" /></td>

So that means I should do this:?

td.windowbg .quote