CSS Intermediate - Pseudo Classes

Complete CSS Tutorial

First Step - Beginner CSS	Second Step - Intermediate CSS	Third & Final Step - Advanced CSS
1. Applying CSS	1. Class and ID Selectors	1. Display
2. Selectors, Properties, and Values	2. Grouping and Nesting	2. Page Layout
3. Colors	3. Pseudo Classes	3. At-Rules
4. Text	4. Shorthand Properties	4. Pseudo Elements
5. Margins and Padding	5. Background-images	5. Specificity
6. Borders
7. Putting It All Together

Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo class { property: value; }, simply with a colon in between the selector and the pseudo class.

Many CSS proposals are not supported by all browsers, but there are four pseudo classes that can be used safely when applied to links.

• link is for an unvisited link.
• visited is for a link to a page that has already been visited.
• active is for a link when it is gains focus (for example, when it is clicked on).
• hover is for a link when the cursor is held over it.

a.snowman:link {
 color: blue;
}

a.snowman:visited {
 color: purple;
}

a.snowman:active {
 color: red;
}

a.snowman:hover {
 text-decoration: none;
 color: blue;
 background-color: yellow;
}

Teach Yourself  by BH24 HTML Editor Tool!

CSS Tutorial by BH24

Although CSS gives you control to bypass it, maintaining different colours for visited links is good practice as many users still expect this. As pseudo classes (other than hover) are not often used, this is a feature that is unfortunately not as common as it once was. Because of this, it is less important than it used to be, but if you are looking for the optimum user response, then you should use it.
Traditionally, text links were blue if not visited and purple if visited, and there is still reason to believe that these are the most effective colours to use, although, again, with the increasingly widespread use of CSS, this is becoming less commonplace and the average user no longer assumes that links must be blue or purple.

You should also be able to use the hover pseudo class with elements other than links. Unfortunately, Internet Explorer doesn't support this method. This is a bloody irritation because there are lots of nice little tricks you can do that look delightful in other browsers.