[CSS] Subclades en CSS? existen?

Bueno, espero que me podáis decir si se puede o no pero (porque e buscado por internet y no e sabido encontrarlo). Ahí va lo que quiero hacer:

Tengo una clase en css:

Código :

.portlet-font {
   font-family: Arial,Helvetica,sans-serif;
   font-style: normal;
   font-weight: normal;
   font-size: 10pt;
   color:black;
}

Tengo un código HTML:

Código :

<font class="portlet-font">El Texto</font>

Pero quiero que sin cambiar la clase usada por el font, me muestre otro estilo, para ello e pensado que igual añadiendo un div con una clase que englobe el font y en el css indicandole que la clase nueva cuando contiene la otra clase use el nuevo estilo. Mas graficamente:

Código :

.nueva portlet-font {
   font-family: Arial,Helvetica,sans-serif;
   font-style: normal;
   font-weight: normal;
   font-size: 20pt;
   color:red;
}

.portlet-font {
   font-family: Arial,Helvetica,sans-serif;
   font-style: normal;
   font-weight: normal;
   font-size: 10pt;
   color:black;
}

Y el HTML:

Código :

<div class="nueva"><font class="portlet-font">El Texto</font></div>

Seria algo así pero no he sabido hacerlo funcionar. A ver si alguien sabe si no se puede hacer o si se puede hacer.

Saludos

No te funciona por un detalle, te falta un punto:

Código :

.nueva .portlet-font {
   font-family: Arial,Helvetica,sans-serif;
   font-style: normal;
   font-weight: normal;
   font-size: 20pt;
   color:red;
}

Y no uses la etiqueta font, usa span:

Código :

<div class="nueva"><span class="portlet-font">El Texto</span></div>

no utilices el tag <font>, está depreciado. mejor <span>

por otro lado, me parece que estás utilizando mal la idea de css, pues sencillamente te estás ahorrando algunos bits de código

Código :

.fontBla{
    font-size:10px;
    color:red;
    (etc..etc..)
}

<span class="fontBla">texto</span>

termina siendo lo mismo que

Código :

<span style="font-size:10px;color:red;">texto</span>

la filosofía css que deberías aplicar es, por ejemplo:

Código :

.opaco{
   color:#ccc;
}
.resaltado{
   color:#f00;
}
<span class="opaco">texto</span> <span class="resaltado">texto</span>

que podría aparentar ser lo mismo, pero a la hora de cambiar el diseño (de un fondo blanco a uno gris, por ejemplo) sólo vas a estas clases y las adaptas, sin tener que reescribir todo el css.

Muchas gracias ryuz, ya lo tengo funcionando.

Gracias también a ti fael, ya se que esto choca un poco con lo que seria normal en el css estoy programando en un entorno que no es el normal (Con portlets) y necesitaba poder cambiar el estilo sin tener que cambiar el código HTML y sin poder quitar el css original, lo único que podía hacer era encapsular el código HTML en un div, por eso investigue esta forma.

Saludos