From W3C Wiki
< Css‎ | Training
Jump to: navigation, search

Link state

The link pseudo-classes

Web browsers commonly display unvisited links differently from previously visited ones.


a:link{ Declarations }
a:visited{ Declarations }
  • a:link: applies for links that have not yet been visited.
  • a:visited: pplies once the link has been visited by the user.

The dynamic pseudo-classes

Interactive Web browsers sometimes change the rendering in response to user actions.


a:hover{ Declarations }
a:active{ Declarations }
  • a:hover: applies while the user designates an element (with some pointing device), but does not activate it.
  • a:active: applies while an element is being activated by the user.



a:link, a:visited{
  color: #ff0000;
  text-decoration: underline;
a:hover, a:active{
  color: #0000ff;
  text-decoration: none;


<p>Jump to <a href="http://www.google.com/">Google</a></p>
<p>Jump to <a href="http://www.yahoo.com/">Yahoo!</a>

Cssed links exam.png


1. Changes the color of side navigation by link state.


nav ul li a:link, nav ul li a:visited{
  color: #333333;
  text-decoration: none;
nav ul li a:active, nav ul li a:hover{
  color: #990066;
  text-decoration: none;

Cssed links chall.png

In the next week, you will learn the Box model. It is very important in the study item of CSS.