Defining Contextual Selectors

A contextual selector is a style selector that identifies all HTML tags of a particular type that appear somewhere within the tag of another type. You use this kind of selector to style all emphasis tags that appear inside a table, for instance, or all strong tags that appear inside an ordered list. In these examples, the browser ignores emphasis tags that don't appear in a table or strong tags that don't appear in an ordered list, unless of course you provide additional style rules for these instances.

GEEKSPEAK

A contextual selector is a style selector that identifies all HTML tags of a particular type that appear somewhere within the tag of another type, such as all strong tags that appear inside an ordered list.

The syntax for this type of selector looks something like this:

 container-tag target-tag 

As you can see, you separate the tag names with a singe space. So, to define a style for all strong tags that appear somewhere inside an ordered list, the style rule looks something like this:

 ol strong {   font-style: italic; } 

The browser displays only those strong tags that appear inside an ordered list in type that is both bold and italic. Why bold, you might wonder, when the style doesn't mention anything about boldface? Because, by default, browsers give strong tags the bold treatment. The rest of the strong tags on the page simply display as bold, without the extra enhancement of italics, as in Figure 45.1.

Figure 45.1. With a contextual selector, only those strong tags that appear inside an ordered list get the additional styling.

You can get really picky with contextual selectors. Say you want to style only those emphasis tags that appear inside paragraph tags that appear inside table cells that appear inside div elements:

 div td p em {   font-weight: bold; } 

The browser follows your instructions to the letter, as Figure 45.2 shows.

Figure 45.2. String a number of tags together for a very specific contextual selector. This style only affects emphasis tags inside paragraph tags inside table cells inside div elements.