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
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 | 
