Web design development.Contextual Selection with Styles

Using this feature called "contextual selectors" can create attractive nested ordered lists.

Contextual Selectors

Normally, a style rule is associated with a tag. Anywhere that tag appears in the document, the style is applied. You can fine tune this a bit by naming the style, creating a class that can be applied to a tag only when the CLASS attribute is used. Contextual selectors give you the ability to apply a style only when a tag appears in a certain context within your document.

In the case of styles, "context" means a specific sequence of tags. Thus, you might want <B> tags within <H1> tags to appear differently from <B> tags that appear elsewhere. You accomplish this by using this style rule:

  H1 B {color: blue;}

This rule says that whenever a <B> tag appears within an <H1> tag, it will be colored blue. If a <B> tag shows up anywhere else, it gets rendered normally.

Browsers treat these nesting rules fairly loosely. If the <B> tag is contained within another tag, which is in turn contained by an <H1> tag, the rule is applied as well. This works to your advantage, since it is hard to anticipate all the ways you might nest tags. For example, suppose you want to ensure that images contained within tables do not have borders. The rule:

  TABLE IMG {border: none;}

works, even though the <IMG> tag will be nested within a <TD> and <TR> tag within the table.

Styling nested lists

How does this apply to lists? You can use the contextual selector to control the appearance of lists when they are nested within other lists, overriding how the browser might handle the display.

For example, you might always want your outermost unordered lists to use square bullets, with the next level using circles, and the third level using discs. To accomplish this, place the following style sheet in your document:

<STYLE TYPE="text/css">

<!--

  UL {list-style-type: square;}

  UL UL {list-style-type: circle;}

  UL UL UL {list-style-type: disc;}

-->

</STYLE>

and you'll get that list all the time, regardless of the browser's default bullet choices.

This is an added benefit with ordered lists. For the first time, contextual style selectors let you create traditional numbered outlines, with the numbering style changing as you get further into the nesting. Consider these contextual style rules:

<STYLE TYPE="text/css">

<!--

  OL.outline {list-style-type: upper-roman;

              font: bold italic 18pt sans-serif;}



  OL.outline OL {list-style-type: upper-alpha;

                 font: bold 14pt sans-serif;}



  OL.outline OL OL {list-style-type: decimal;

                    font: 12pt serif;}



  OL.outline OL OL OL {list-style-type: lower-alpha;

                       font: 10pt serif;}



  OL.outline OL OL OL OL {list-style-type: lower-roman;

                          font: 10pt sans-serif;}

-->

</STYLE>

These rules create different numbering styles for each outline level, and also change the font at each level, starting with larger bolder faces and reducing in size as you get deeper into the outline. These numbering rules only get invoked when you use the class named .outline with the outer <OL>; other numbered lists will be displayed normally.

Both Internet Explorer and Netscape should display lists using these methods correctly, with indenting, changing number styles, and varying fonts.

You will want to try this out on your own to get a feel for the variety of styles you can create with just a few simple rules after that, have a look at the simple definition list.

<< BACK