Sammensmelte to CSS kodedele?

Jeg benytter et stykke CSS-kode til at lave "citatbokse" på min hjemmeside.

-----------
CSS-koden ser i korte træk sådan ud:

.QuoteBox{
  background: #D7EBFF url(../images/quote-left.gif) no-repeat left top;
}

.QuoteBox div{
  background: transparent url(../images/quote-right.gif) no-repeat right bottom;
}

Til sammen danner disse to en boks med citattegn i hver side og det virker udmærket.

-----------
I min HTML-fil "fremkalder" jeg denne kode ved at bruge:
  <div class="QuoteBox"><div>Indsat tekst</div></div>

-----------

Spørgsmålet:
Er der nogen måde hvorpå jeg kan sammensmelte de ovennævnte CSS-dele, så jeg ikke behøver at bruge to DIV-tags i min HTML-kode?

// Old-Faithful™ (aka CSS-noob²)