Selettore di discendenti in CSS

Supponiamo di avere una lista ul e una lista ol:

html<ul>
  <li>testo</li>
  <li>testo</li>
  <li>testo</li>
  <li>testo</li>
  <li>testo</li>
</ul>
<ol>
  <li>testo</li>
  <li>testo</li>
  <li>testo</li>
  <li>testo</li>
  <li>testo</li>
</ol>

Coloriamo i tag li in queste liste di rosso:

cssli {
  color: red;
}

Supponiamo ora di voler colorare i tag li della lista ul in rosso, e i tag li della lista ol in verde.

In questo caso ci aiuterà il selettore dei discendenti. Permette di selezionare i tag in base al loro genitore. Per fare ciò, è necessario specificare il selettore del genitore, e dopo uno spazio - il selettore del discendente. Nel nostro caso il selettore ul li selezionerà tutti i tag li della lista ul, mentre il selettore ol li - selezionerà tutti i tag li della lista ol. Coloriamoli nei colori desiderati:

cssul li {
  color: red;
}
ol li {
  color: green;
}

Il selettore di discendenti non deve necessariamente essere composto da due selettori di tag - possono essercene un numero qualsiasi, scritti separati da spazio. Nel codice seguente, ad esempio, vengono selezionati tutti i tag i che si trovano all'interno del tag li, che a loro volta si trovano all'interno del tag ul:

cssul li i {
  color: red;
}

html<ul>
  <li>testo <i>corsivo</i></li>
  <li>testo <i>corsivo</i></li>
  <li>testo <i>corsivo</i></li>
  <li>testo <i>corsivo</i></li>
</ul>

<p>
  testo paragrafo <i>corsivo</i>
</p>
<p>
  testo paragrafo <i>corsivo</i>
</p>

html<p>
  testo paragrafo <b><i>grassetto corsivo</i></b>
</p>
<p>
  testo paragrafo <i>corsivo</i>
</p>