Anchor Link Pseudo Classes

Tweet

A pseudo class is not something that depends upon the tags or markup, but the most common event is that the user points something. This tells what the link color should be initially and how should the link behave when the mouse point or click the link and something about the link behaviour.

1. Link

You can makeover a link in a default way of how it should look when nothing happens. As this is a link waiting for something to happen.

a: link {
color : black;
}

2. Visited

This pseudo class defines whether a user have visited the site before or not. If the user have clicked this link before, the characteristic of the link will change.

a: visited {
color: green;
}

3. Hover

Here, the characteristic of the link will change when the mouse move over the link, but when not clicked.

a: hover {
text-decoration: none;
}

4. Active

This means defining the characteristic of the link when clicking the link, though it occurs for only a fraction of second.

a: active {
color: navy;
}

You don't have to define all four of these states, but the browser may skip some of these rules if you don't state them in the order: link, visited, hover, active.