CSS pseudo-classes allow you to style links based on their different states. The order of these pseudo-classes is important for proper styling.
:link
Styles unvisited links with a destination
:visited
Styles links that exist in browser history
:focus
Styles links when focused (keyboard navigation)
:hover
Styles links when mouse pointer is over them
:active
Styles links while being activated (clicked)
a:link {
color: green;
}
a:visited {
color: olive;
}
a:focus {
background: orange;
}
a:hover {
background: yellow;
text-decoration: underline red wavy;
}
a:active {
background: red;
}
color: green;
}
a:visited {
color: olive;
}
a:focus {
background: orange;
}
a:hover {
background: yellow;
text-decoration: underline red wavy;
}
a:active {
background: red;
}
lightbulb
Remember the Order
Use the mnemonic: LoVe Fears HAte
Link, Visited, Focus, Hover, Active
Link, Visited, Focus, Hover, Active