The Descendant Selector

So far, we have only used selectors which directly targeted a specific element or element(s) with a specific ID or class. Especially targeting elements of a specific type, e.g. all links or images, is very powerful, but what if you want to limit this, for instance to elements found only in a specific part of the page? This is where combinators come into the picture, a range of selector types which uses the hierarchy of elements on your page to limit the elements targeted.

In this chapter, we'll look into the Descendant selector, which allows you to limit the targeted elements to the ones who are descendants of another element. The syntax is very simple - you simply write the parent(s), separate with a space, and then the actual element you want to target. Here's an example:

<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!

In this example, I want all bold elements to be blue, but only if they are inside a paragraph tag. If you try the example, you will see that while the bold tag is used four times, only the first two of them are blue - that's because they are inside a paragraph, which our descendant selector requires!

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.