CSS Selectors

Targeting Link States

Browser compatibility
Chrome Firefox (Gecko) Internet Explorer Opera Safari
1.0 1.0 3.5 3.5 1.0

CSS can target link states by using the :link, :visited, :hover, and :active pseudo-class selectors. These will target any unvisited link with an href attribute, any visited link, any link currently being hovered over, and any link that is currently being interacted with. If used in combination it is recommended to use them in this order, as they share the same level of specificity and :link or :visited styling could overwrite :hover or :active styling. Due to privacy concerns there are limits on the styles you can apply to visited links. For the most part you are limited to color, background-color, and border properties.

Syntax

To target link states start with the anchor element selector (a) follow it with a colon(:) and then the desired state (link, visited, hover, or active) with no whitespace. The :link pseudo-class selector doesn’t require the anchor element preceding it, although it there’s no real reason to leave it off. The :hover and :active pseudo-class selectors are not exclusive to anchor elements.


unvisted link
a:link {
  color: red;
    }

visited link
a:visited {
  color: gray;
    }
    
hovered link
a:hover {
  color: black;
    }   
    
active link
a:hover {
  border: 1px solid red;
    } 
    
Targeting link states

Example:

Styling links

Style the different states of this link.

This link has no href attribute.