Spero di riuscire a formulare bene la domanda.

Ho questa esigenza: in un unico div ho 3 classi (esempio...

codice:
<div class="rosso blu verde">Novembre</div>
ciascuna delle tre classi deve inserire una immagine url diversa, con sfondo trasparente e sovrapponibile

(sono tre spicchi di cerchio, quello in alto rosso, quello in basso a sinistra verde e quello in basso a destra blu).

se scrivessi qualcosa del tipo

codice:
.rosso{background-image:url(rosso.png);}
.verde{background-image:url(verde.png);}
.blu{background-image:url(blu.png);}
(ovviamente con i relativi no repeat del caso)
ogni nuova dichiarazione mi va a sovrascrivere quella precedente. c'è un modo per dirgli di aggiungere e non di sovrascrivere?

Oppure sono costretto a spacchettare il div in tre div separati ciascuno con la propria classe?