The Descendant Selector

Hasta ahora, solo hemos utilizado selectores que se dirigen directamente a un elemento o elementos específicos con un identificador o clase específico. Especialmente para los elementos de un tipo específico, por ejemplo, todos los enlaces o imágenes, es muy potente, pero ¿qué pasa si desea limitar esto, por ejemplo, a los elementos que sólo se encuentran en una parte específica de la página? Aquí es donde los combinadores entran en juego, un rango de tipos de selector que utiliza la jerarquía de elementos en su página para limitar la elementos dirigidos.

En este capítulo miraremos en los Selectores de hijo, los cuales te permiten limitar los elementos apuntados a aquellos son descendientes de otro elemento. La sintaxis es muy simple - se escribe el padre(s), se separa con un espacio, y entonces el elemento real al cual se quiere apuntar. Aquí hay un ejemplo:

<style type="text/css">
p b {
	color: Blue;
}
</style>

<p>Hello, <b>world</b> - what a <b>beautiful</b> day!</p>

Hello, <b>world</b> - what a <b>beautiful</b> day!

En este ejemplo, quiero que todos los elementos en negrita sean azul, pero solo si ellos estan dentro de una etiqueta de párrafo. Si intentas hacer el ejemplo, verás que mientras la etiqueta negrita es usada cuatro veces, sólo las dos primeras son azules - eso es porque están dentro de un párrafo, ¡que es lo que requiere nuestro selector de hijo!

This is obviously a very basic example, but think of the bigger picture - for instance, this would easily allow you to change the color of all links inside your main menu, without having to tag them all with a specific class!

Of course, you can use all the usual modifiers to limit your selector to specific classes or ID's, like in this example:

<style type="text/css">
p.highlighted b {
	color: Blue;
}
</style>

<p class="highlighted">Hello, <b>world</b> - what a <b>beautiful</b> day!</p>

<p>Hello, <b>world</b> - what a <b>beautiful</b> day!</p>

Here, we only target bold elements which are descendants of a paragraph with the class "highlighted".

A descendant doesn't need to be the direct child

With this selector type, you should be aware that not only direct children are targeted - also children of the child (grandchildren) and so on will be targeted, all the way down through the hierarchy. This example should demonstrate that just fine:

<style type="text/css">
div.highlighted b {
	color: Blue;
}
</style>

<div class="highlighted">
	<b>Level 0...</b>
	<div>
		<b>Level 1...</b>
		<div>
			<b>Level 2...</b>
		</div>
	</div>
</div>

Here, we target bold elements which are descendants of a div tag with the class "highlighted". If you try the example, you will notice that even though we wrap the last set of bold tags in several layers of div tags, it is still affected by the rule about blue bold tags. If you only want direct children to be affected, you need the child selector, which will be explained in one of the next chapters.

Summary

The syntax for a descendant CSS selector is extremely simple - just write the parent selectors, a space and then the target selector. Despite the fact that it is so easy to use, it's also extremely powerful. Hopefully you have already learned that from the examples of this article, but if not, just read on, to see more about what the advanced CSS selectors can do for you.