Utilizzo degli id in CSS
Quando si utilizza id sono disponibili tutte
le manipolazioni con i selettori che abbiamo studiato
nelle lezioni precedenti.
Esempio
Supponiamo di avere il seguente codice:
<div id="block">
<h2>Title</h2>
<p>text</p>
<p>text</p>
</div>
Selezioniamo h2 dall'elemento con id
uguale a block e coloriamolo di rosso:
#block h2 {
color: red;
}
Ora selezioniamo i p dall'elemento con
id uguale a block e coloriamoli
di verde:
#block p {
color: green;
}
Esempio
Supponiamo ora di avere il seguente codice:
<div id="block">
<h2 class="header">Title</h2>
<p>text</p>
<p>text</p>
<h3 class="header">Title</h3>
<p>text</p>
<p>text</p>
</div>
Selezioniamo gli elementi con classe header,
che si trovano all'interno dell'elemento con id
uguale a block, e coloriamoli
di rosso:
#block .header {
color: red;
}
Ora selezioniamo i titoli h2 con classe
header, che si trovano all'interno dell'elemento
con id uguale a block, e coloriamoli
di rosso:
#block h2.header {
color: red;
}
Problemi pratici
Scrivi un selettore che selezioni tutti gli h2
che si trovano nell'elemento con id uguale a
elem. Verifica il tuo selettore sul seguente
codice:
<div id="elem">
<h2>Choose</h2>
<p>---</p>
<h2>Choose</h2>
<p>---</p>
</div>
<h2>Do not +++</h2>
<p>---</p>
Scrivi un selettore che selezioni tutti gli elementi
con classe text, che si trovano nell'elemento
con id uguale a elem. Verifica
il tuo selettore sul seguente codice:
<div id="elem">
<p class="text">+++</p>
<p class="text">+++</p>
<ul>
<li class="text">+++</li>
<li class="text">+++</li>
<li class="text">+++</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
Scrivi un selettore che selezioni tutti i paragrafi
con classe text, che si trovano nell'elemento
con id uguale a elem. Verifica
il tuo selettore sul seguente codice:
<div id="elem">
<p class="text">+++</p>
<p class="text">+++</p>
<ul>
<li class="text">---</li>
<li class="text">---</li>
<li class="text">---</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
Scrivi un selettore che selezioni tutti gli li
con classe text, che si trovano nell'elemento
con id uguale a elem. Verifica
il tuo selettore sul seguente codice:
<div id="elem">
<p class="text">---</p>
<p class="text">---</p>
<ul>
<li class="text">+++</li>
<li class="text">+++</li>
<li class="text">+++</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
