Introduzione ai CSS - HTML5 con CSS e JavaScript - page 80

Un altro caso particolare è quello dato dai selettori all'interno dell'esempio 4.16 .
Esempio 4.16 - HTML
<p>Questo è un contenuto <strong>importante</strong>.</p>
<div>
<ul>
<li>
<div>Contenuto generico</div>
<p>Contenuto dentro un paragrafo</p>
</li>
</ul>
</div>
Esempio 4.16 - CSS
p > strong {
color: green;
}
div ul>li p {
background: aqua;
}
In questo caso, il primo selettore indica che vogliamo recuperare i tag strong posti di-
rettamente al di sotto di un tag p . A differenza del primo selettore dell'esempio 4.15 , que-
st'ultimo non funzionerebbe in presenza di un tag innestato.
Il secondo settore dell'esempio 4.16 indica una gerarchia ancora più precisa: solo gli
elementi p posti all'interno di un tag li , inserito esclusivamente sotto un tag ul , contenu-
to in un tag div , avranno lo stile CSS applicato. È da notare, insomma, che è il catrattere
> che vincola la presenza del tag direttamente a quello che contiene.
Come possiamo notare, lo spazio prima e dopo il carattere > è opzionale e, in genere, è
mantenuto per una questione di leggibilità.
Una variante di questi selettori, che consente di gestire altri casi, è visibile nell'esempio
4.17 .
Esempio 4.17 - HTML
<label>