CREARE SITI WEB in HTML e CSS > Selettori specifici
Nelle precedenti lezioni, hai visto che per differenziare il formato di uno stesso elemento si è fatto ricorso alle classi.
Ad esempio, nel Foglio Stile sono dichiarate diverse classi:
.nerobianco {background-color: black;color: white;}
.gialloverde {background-yellow: black;color: green;}
.gialloverde {background-yellow: black;color: green;}
applicate poi agli elementi HTML
<h1 class="nerobianco"> Un titolo in bianco e nero</h1>
<h1 class="gialloverde"> Un titolo in giallo e verde</h1>
<p class="nerobianco"> Un paragrafo in bianco e nero</p>
<p class="gialloverde"> Un paragrafo in giallo e verde</p>
<h1 class="gialloverde"> Un titolo in giallo e verde</h1>
<p class="nerobianco"> Un paragrafo in bianco e nero</p>
<p class="gialloverde"> Un paragrafo in giallo e verde</p>
Puoi raggiungere lo stesso obbiettivo facendo precedere (nel Foglio Stile) l'elemento da formattare, dagli identificatori (di blocchi) e/o da altri elementi che lo contengono.
Ad esempio con le dichiarazioni
#contenitore p {background-color: black;color: white;}
#piedipagina p {background-yellow: black;color: green;}
#piedipagina p {background-yellow: black;color: green;}
oppure
div#contenitore p {background-color: black;color: white;}
div#piedipagina p {background-yellow: black;color: green;}
div#piedipagina p {background-yellow: black;color: green;}
i paragrafi creati all'interno del blocco "contenitore" saranno formattati in bianco e nero;
i paragrafi creati all'interno del blocco "piedipagina" saranno formattati in giallo e verde.
Ecco l'esempio da applicare tra i TAG <body>:
<div id="contenitore"> <p> Paragrafo in bianco e nero<p> </div>
<div id="piedipagina"> <p> Paragrafo in giallo e verde<p> </div>
<p>Paragrafo non formattato<p>
<div id="piedipagina"> <p> Paragrafo in giallo e verde<p> </div>
<p>Paragrafo non formattato<p>