Formatting links with Descendant Selectors

When you are designing a web page there are times you will want to have more than one color for links, for example you may want light coloured links that appear against a dark background and dark links that appear against a light background -- on the same page. In the example below we have a content area where the links are clearly visible but in the navigation area with a dark background and the links barely show. While it would be nice to simply be able to select the text of the link and give it another lighter colour it just doesn't work that way.

Descendant Selectors to the rescue.

A descendant selector is used when you want to create a style that affects a tag but only when the tag is used in conjunction with another tag. For example consider the following CSS Rules:

H1 { color: blue } - this would make all H1 tags blue
strong   { color: blue } - this would make all text enclosed in a strong tag blue as well
H1 strong   {color: red} - would make any text enclosed in a strong tag that is itself enclosed in a H1tag, red.

Step 1: Enclose one set of links inside a span tag

Block the links you wish to change the color of and then click on the Quick Tag Editor icon on right edge of the Property Inspector.

A fly-out will appear with a choice of tags you can wrap around the current selection, either type in span or choose it from the drop down list.

Alternately you can simply switch to Code view and manually insert the <span> and </span> tags around your list of link tags.

Step 2: Create a New CSS Rule

Click on the new rule icon at the bottom of the CSS panel. From the resulting New CSS Rule dialog box choose Advanced (IDs, pseudo-class selectors) and enter span a:link in the Selector text box. Choose whether you wish to define this rule in this document only or specify an external CSS style sheet. Then click OK

From the Type Category, choose a different colour for the link.

Click Ok.

Repeat the process if you would like to specify different colours for the visited, active and hover attributes of these links.

span a:visited
span a:hover
span a:active