Recipe 6.3. Changing Link Colors in Different Sections of a Page

Problem

You want to apply different links to the main text and the navigation.

Solution

First, wrap sections of the page with div elements and different attribute values:

<div >  [...] </div><!-- end --> <div >  [...] </div><!-- end -->

Then use descendant selectors with ID selectors along and the LV/HA method discussed in Recipe 6.2 to isolate different link styles to different areas of a web page:

/* navigation link design */ #nav a:link {  color: blue; }  #nav a:visited {  color: purple; } /* content link design */ #content a:link {  color: white; }  #content a:visited {  color: yellow; }

Discussion

The use of the ID selector to identify sections of the web page opens the door for applying different styles to the same elements or selectors. Rely on the same selectors to create links with different styles by section. For more on ID selector, see Recipe 1.2. Applying LV/HA mnemonic order to the links also ensures your links operate as expected.

See Also

The W3Schools Tutorial on CSS Pseudo-classes at http://www.w3schools.com/css/css_pseudo_classes.asp, or the Backstage tutorial on multiple link colors at http://www.metalusions.com/backstage/articles/2/.