Selector de descendientes en CSS

Supongamos que tenemos una lista ul y una lista ol:

<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 a colorear las etiquetas li en estas listas de color rojo:

li {
	color: red;
}

Ahora supongamos que queremos colorear las etiquetas li de la lista ul en rojo, y las etiquetas li de la lista ol - en verde.

En este caso nos ayudará el selector de descendientes. Permite seleccionar etiquetas por su padre. Para esto hay que especificar el selector del padre, y seguido de un espacio - el selector del descendiente. En nuestro caso el selector ul li seleccionará todas las etiquetas li de la lista ul, y el selector ol li - seleccionará todas las etiquetas li de la lista ol. Vamos a colorearlas en los colores necesarios:

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

El selector de descendientes no necesariamente debe consistir en dos selectores de etiquetas - puede haber cualquier cantidad de ellos, escritos separados por espacios. En el siguiente código, por ejemplo, se seleccionan todas las etiquetas i, que están dentro de la etiqueta li, que a su vez están dentro de la etiqueta ul:

ul li i {
	color: red;
}

Se da el siguiente código:

<ul>
	<li>texto <i>cursiva</i></li>
	<li>texto <i>cursiva</i></li>
	<li>texto <i>cursiva</i></li>
	<li>texto <i>cursiva</i></li>
</ul>

<p>
	texto de párrafo <i>cursiva</i>
</p>
<p>
	texto de párrafo <i>cursiva</i>
</p>

Coloree en rojo la cursiva de las etiquetas ul, y en verde - la cursiva de las etiquetas p.

Se da el siguiente código:

<p>
	texto de párrafo <b><i>negrita cursiva</i></b>
</p>
<p>
	texto de párrafo <i>cursiva</i>
</p>

Coloree en rojo la cursiva que se encuentra dentro de la etiqueta b, que a su vez se encuentra dentro de la etiqueta p.