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.