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 {
<!DOCTYPE html>
/* 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;

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