Break the <FONT ...> Habit: Contextual Selectors

In the previous page we looked at using classes to apply a style to specific HTML elements. Another way to set styles that only sometimes apply to a certain element is to indicate that the rules apply only when that element is within another type of element. With this type of selector, called a contextual selector, you put the name of the outer element, then a space, then the name of the inner element. For example, suppose that you want to italicize anchors which are within <H1 ...> elements. You could do that with the following style rule (in a STYLE tag or in a style sheet file):

H1 A
   {font-style:italic;}

You then write the HTML as usual:

<H1>New Products, <A HREF="april.html">April 2001</A></H1>

which gives us

New Products, April 2001

Contextual selectors can also be used in conjunction with classes. For example, suppose you wanted to create a <DIV ...> element where the text is larger than usual, and just for anchors are italicized. That could be done with this style rule:

.topofpage
   {
   font-size:180%;
   }
.topofpage A
   {
   font-style:italic;
   }

The first rule says that all topofpage elements have a font size of 180%. The second rule says that <A ...> elements within topofpage elements are in italic. We can then apply the style to a <DIV ...> element like this:

<DIV CLASS="topofpage">
Links: 
[ <A HREF="./">Home</A> ] 
[ <A HREF="list.html">Listings</A> ] 
[ <A HREF="price.html">Price Chart</A> ] 
</DIV>

which gives us