Although quite powerful, you'll often find type selectors to be too indiscriminant in many cases. For example, there are often cases where you wouldn't want a property applied to every P tag, just specific P tags.

Contextual Selectors

To target elements more selectively, use contextual selectors (aka descendant selectors).

Let's look at a specific example. Suppose you want words marked by a BOLD tag to be purple, but you want any word within an LI tag that also uses a BOLD tag to be red. To accomplish this effect, you would write the following rules:

b { color: purple; }   li b { color: red; } /* a contextual selector */

Elements in a contextual selector are separated by spaces, not commas!

Let's examine the syntax above. Contextual selectors use multiple elements in the selector; in this case, LI and B tags. The element nearest the declaration block, the last element in the list, is the tag being targeted. For our example, we are applying a style to the B tag. This contextual syntax tells the browser to apply this style only to B tags that appear within a LI tag. The target element must be a descendent of the other elements in the selector; i.e., the other elements in the selector are only used to specify context for the target element.

Here is an example of markup to demonstrate the LI B contextual selector:

<p> This paragraph and the list below include <b>bold text</b>. Notice that the bold text <b>within this paragraph</b> is purple, and the bold text within the list is red. </p> <ul> <li>First item</li> <li>Second item</li> <li>Yet another item</li> <li>This line contains <b>bold text</b> within a LI tag. Therefore, it is red. </li> </ul> <p> This paragraph also contains <b>bold text</b>. The bold text is purple because it is not within LI tags. </p>

This is the resulting display:

This paragraph and the list below include bold text. Notice that the bold text
within this paragraph is purple, and the bold text within the list is red.

This paragraph also contains bold text. The bold text is purple because it is not within LI tags.

Contextual selectors are very selective. They can be used to target very specific elements in the document. We'll demonstrate this with examples applied to the markup shown below. In the markup, EM tags are inside H1, P, and SPAN tags. Note that in the third paragraph, there is an EM tag in a SPAN tag which is in a P tag. In each example, we will target specific EM tags.

<h1>Contextual selectors are <em>very</em> selective. </h1>   <p>This example shows how to target a <em>specific</em> tag using the document hierarchy. </p>   <p>Tags only need to be descendants <span> in the <em>order listed</em> in the selector </span>; other tags can be in between and the selector still works. </p>

If a type selector is written for the EM tag to be orange,

em { color: orange; }

it will apply globally. View the result.

However, if only EM text within a P tag should be orange, the rule would be written like this:

p em { color: orange; }

and any EM text within any P tag will be orange. Note that the EM text in the H1 tag is not affected because it does not have a P tag ancestor. View the result

In the third paragraph of the example markup there is an EM tag inside a SPAN tag which is inside a P tag. Though the SPAN tag is between the P tag and the EM tag, the p em selector applies in this case because the EM tag is a descendant of the P tag. View the result

In a contextual selector, the targeted element does not need to be a direct descendent of the other elements. It may be any level of hierarchy below the specified ancestor.

If we only wanted to target the EM text in the third paragraph, we would use the following rule:

p span em { color: orange; }

The selector could be read, "Target an EM tag within a SPAN tag that is within a P tag." Whew! Here's the resultant display