[CSS] Selectors (3) – Anchor

The anchor “<a>” element is used to create a link. Unlike other elements, the anchor element has a mode (state) and can be styled accordingly. CSS provides the pseudo-selectors to select each state.


1. Anchor Selectors

There are 4 pseudo-selectors for the anchor element.

  • :link – unvisited link
  • :visited – visited link
  • :hover – mouse over link
  • :active – selected link

The “:active” selector is used when a user clicks a link and is holding the mouse.


2. Order of Anchor Selectors

It is important to understand that the order of pseudo-selectors DOES MATTER!

Wrong ordering will result in inconsistent behaviors that can be hardly tracked.

  • :hover MUST come after :link and :visited
  • :active MUST come after :hover

So the recommended use of anchor selectors is like the following example:

a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s