Seletor de descendentes em CSS

Suponha que temos uma lista ul e uma lista ol:

html<ul>
  <li>texto</li>
  <li>texto</li>
  <li>texto</li>
  <li>texto</li>
  <li>texto</li>
</ul>
<ol>
  <li>texto</li>
  <li>texto</li>
  <li>texto</li>
  <li>texto</li>
  <li>texto</li>
</ol>

Vamos colorir as tags li nessas listas em vermelho:

cssli {
  color: red;
}

Agora, suponha que queremos colorir as tags li da lista ul em vermelho, e as tags li da lista ol - em verde.

Neste caso, o seletor de descendentes nos ajudará. Ele permite selecionar tags pelo seu elemento pai. Para isso, é necessário especificar o seletor do pai, e, após um espaço, o seletor do descendente. No nosso caso, o seletor ul li selecionará todas as tags li da lista ul, e o seletor ol li - selecionará todas as tags li da lista ol. Vamos colori-las nas cores desejadas:

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

O seletor de descendentes não precisa necessariamente consistir em dois seletores de tag - pode haver qualquer quantidade deles, escritos com espaços. No código a seguir, por exemplo, são selecionadas todas as tags i que estão dentro de uma tag li, que por sua vez estão dentro de uma tag ul:

cssul li i {
  color: red;
}

html<ul>
  <li>texto <i>itálico</i></li>
  <li>texto <i>itálico</i></li>
  <li>texto <i>itálico</i></li>
  <li>texto <i>itálico</i></li>
</ul>

<p>
  texto do parágrafo <i>itálico</i>
</p>
<p>
  texto do parágrafo <i>itálico</i>
</p>

html<p>
  texto do parágrafo <b><i>negrito itálico</i></b>
</p>
<p>
  texto do parágrafo <i>itálico</i>
</p>