CSS

Pseudo-classes

A pseudo-class is used to define a special state of an element.
For example, it can be used to:
  • Style an element when a user mouses over it
  • Style visited and unvisited links differently
The syntax of pseudo-classes:
selector:pseudo-class {
    property:value;
}
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
    color: red;
text-decoration: none;
}

/* visited link */
a:visited {
    color: green;
text-decoration: none;
}

/* mouse over link */
a:hover {
    color: hotpink;
text-decoration: underline;
background-color: gray;
}

/* selected link */
a:active {
    color: blue;
text-decoration: none;
}

/* focused link */
a:focus {
color: yellow;
text-decoration: none;
background-color: red;
}
</style>
</head>
<body>

<p><b><a href="#">Home</a></b></p>
<p><b><a href="#">About</a></b></p>
<p><b><a href="#">Contact</a></b></p>
</body>
</html>