Pseudo Class — Order Matters

A link has four different states that it can be in

  • link – this is a link that has not been used, nor is a mouse pointer hovering over it
  • visited – this is a link that has been used before, but has no mouse on it
  • hover – this is a link currently has a mouse pointer hovering over it/on it
  • active – this is a link that is in the process of being clicked

The “pseudo class” defines how the HTML element should appear, depending on which state it is in. Below is an CSS example of changing the “link”, “visited”, and “hover” state. The order defines the function, and the proper ordering will make it a functioning CSS link.

a:link { color: red; }
a:visited { color: red; }
a:hover { color: blue; }

Pseudo class associated with each state must be used in this order:


For example:
a:hover must come after :link and :visited for it to be effective
a:active must come after a:hover in the CSS definition order to be effective.

No comments yet.

Leave a Reply