Click Here
for FREE
Web Hosting!

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

Links: [ Home ] [ Listings ] [ Price Chart ]

Recommended Resources

web hosting tutorials
Credit Help

Search the Internet
Search Engine Help

Low Fat Lifestyle
Internet Traffic

Web Hosting
Web Design

Discount Hotel Reservations

Search The Internet

Copyright 1997-2002 Idocs Inc. Content in this guide is offered freely to the public under the terms of the Open Content License and the Open Publication License. Contents may be redistributed or republished freely under these terms so long as credit to the original creator and contributors is maintained. About the author

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

New Products, April 2001

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