Dr. Dobb's | Contextual Selectors

Contextual Selectors

January 01, 2002
URL:http://drdobbs.com/contextual-selectors/184411877

WebReview.com: Contextual Selectors

As we learned a few weeks ago, the first part of a style rule is the selector. It selects the tags to which the style properties will be applied. In general, the selector contains a list of one or more tag names, separated by commas, that define the tags affected by this rule. If you like, you can add class and pseudo-class names to the tag names to make the rule definition more specific. Even so, the rule is applied to every tag in your document without regard to position or tag nesting.

Contextual selectors give you some control over the styles applied to tags in a specific order in your document. Keep in mind that a well-formed HTML document consists of nested tags, starting with the outermost <html> tag and working inward to individual <p> tags. As content is created within frames, tables, divisions, and other flow control elements, you build a tag nesting within tags.

By using contextual selectors, you define styles that are only applied when certain tags are nested within other tags. For example, you might want paragraphs within certain table cells to be set in a smaller type face or to be aligned a certain way. With contextual selectors, paragraphs in table cells will get the desired style changes, but other paragraphs will not be affected.

Using contextual selectors

Let's stick with our example and create a contextual selector that causes all text with table cells to be smaller than the rest of our document:

     TABLE TR TD P { font-size : smaller }

In this selector, we've spelled out the complete sequence of nested tags that will contain our content, from the outermost <table> tag to the inner <p> tag. When the browser encounters this nesting sequence, it will apply the font-size : smaller property to the text.

This selector won't work for text in <th> cells, since they have a different nesting sequence. Realizing that tags get nested in lots of different ways, HTML lets you be fairly loose in how you specify the nesting. A better way to create this contextual selector would be to just use:

     TABLE P { font-size : smaller }

The browser will apply the style if it ever encounters a <p> tag nested somewhere within a <table> tag, regardless of the intermediate tags between the two.

You can create contextual selectors with classes to further refine the application of styles. For example,

     TABLE.smaller P { font-size : smaller }

creates a context with a <p> tag nested within a <table> tag whose class attribute is set to smaller. Paragraphs in any other tables will not be affected by this style rule.

Contextual selectors are powerful tools that give you tremendous control over complex document layouts. As we'll see in coming weeks, you can create all sorts of clever styles that get applied automatically as your document tags nest in certain patterns.

Previously in Tag of the Week:

A Special Kind of Class
Using IDs as Classes
How to Add Class to Your Tags