come mai questo non funziona (p, class, #id)

[Cerebro]

HTML:

<div id="content">
<p class="piccolo">ciao</p>
</div>

Il problema risiede solo nei font-size, ignorate le altre dichiarazioni.

#content p {margin:0 0 1.0em 0; line-height:1.5em; font-size:100%;}
#content .piccolo {font-size:50%;}

'ciao' viene effettivamente rimpicciolito del 50%

#content p {margin:0 0 1.0em 0; line-height:1.5em; font-size:100%;}
.piccolo {font-size:50%;}

'ciao' NON viene rimpicciolito del 50%, è come se la class "piccolo" non gli fosse applicata.

[deleted_id_48586]

E' giusto.

nelle regole di funzionamento dei CSS esiste la cosiddetta "SPECIFICITA'" che impone ad una regola più specifica su un selettore di sovrascriverne più generica.

Nel tuo caso "#content p" risulta più specifico (tutti i paragrafi SOLO di #content) rispetto alla generica classe ".piccolo".

Con "#content .piccolo" invece stai dicendo che quella regola va applicata a tutti gli elementi con classe "piccolo" SOLO di #content compresi dunque i paragrafi, risultando così più specifica di "#content p".

Ciao.

[Cerebro]

Ah ecco, non ero al corrente di questa regola.

Speravo che una classe generica .xxx potesse essere applicata e funzionare su qualsiasi tag.

Grazie