Webmasters have known from the start that hyperlinks can seem complicated because they can have various configurations depending on whether they have been clicked or not, if they are being clicked, or if the cursor is over the hyperlink.
To handle these numerous configurations (called declarations), the CSS "pseudo-class" was developed. The syntax for a pseudo-class is as follows:
selector: pseudo-class {property: value;}
A hyperlink uses the anchor <a> tag. The anchor can have four different states: link, visited, hover, and active. (There is actually a fifth state named focus, but it is not often used.) Each state can define how a hyperlink looks at a particular time.
If you have visited many web sites, you know that links are usually easy to spot. The clue is evident because they are visually different from the surrounding text. The default is to underline the link text and make it blue. When you click on the link, the color changes to red. When you see a link to a page you have already seen, it has changed to purple. Today, many sites will change the default link colors, but they are still obviously links because they are different than the other text on the page.
If you wanted every link state to be the same, you would not have to add the pseudo-class and would style the link as follows:
If you wanted each link state to be the same except for the hover link, you would add the pseudo-class to the hover link rule. An example is as follows:
To set each link state differently, you add the pseudo-class to each state as follows:
In the real world of web design, you will probably have a
page with different color blocks. For example, your main text area may be white, but the
sidebar may be blue while the footer area may be black. Rather than trying to come up with
a color scheme for links that would work well against all three different color blocks (a
difficult, if not impossible, task ), we can specify link colors for each separate area
using "contextual selectors".
A contextual selector is a rule that has more than one selector separated by a space. Only when the pattern matches exactly will the style apply.
For example, you want links to look a certain way in the main content area but different in the sidebar and different again in the footer:
Contextual selectors are very powerful and can be used for more than just links. You can style different heading colors, text colors, and more.
Note that if you are going to use all link states, the links must be defined in a specific order: link, visited, hover, and active. An easy way to remember the order is LoVe HAte.
