CSS pseudo-classes allow you to style elements based on their state:
Link State
:link
Targets unvisited links
Visited State
:visited
Targets links the user has already visited
Hover State
:hover
Targets elements when the mouse pointer is over them
Focus State
:focus
Targets elements that have keyboard focus
Active State
:active
Targets elements while they are being activated (e.g., clicked)
/* Styling links based on state */
a:link {
color: #0052cc;
text-decoration: none;
}
a:visited {
color: #5b7fdb;
}
a:hover {
color: white;
background-color: #0052cc;
}
a:focus {
outline: 2px solid #0052cc;
}
a:active {
background-color: #003380;
}
a:link {
color: #0052cc;
text-decoration: none;
}
a:visited {
color: #5b7fdb;
}
a:hover {
color: white;
background-color: #0052cc;
}
a:focus {
outline: 2px solid #0052cc;
}
a:active {
background-color: #003380;
}
Link States Visual Example