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:

html<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:

css#block h2 {
  color: red;
}

Ora selezioniamo i p dall'elemento con id uguale a block e coloriamoli di verde:

css#block p {
  color: green;
}

Esempio

Supponiamo ora di avere il seguente codice:

html<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:

css#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:

css#block h2.header {
  color: red;
}

Problemi pratici

Задание 1

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:

html<div id="elem">
  <h2>Choose</h2>
  <p>---</p>
  
  <h2>Choose</h2>
  <p>---</p>
</div>

<h2>Do not +++</h2>
<p>---</p>

Задание 2

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:

html<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>

Задание 3

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:

html<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>

Задание 4

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:

html<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>