Cristin O'Connor

Frontend Software Engineer

Table of Contents

• Main Pseudo-Classes for Links
  • a:link
  • a:visited
  • :visited
  • a:hover, a:active, and a:focus
• Order of Pseudo-Classes (LVHA Rule)

Main Pseudo-Classes for Links

These pseudo-classes are used with the anchor <a> element to style links in different states:

a:link

a:link: Selects and styles unvisited links (links the user hasn't clicked yet).

a:visited

a:visited: Selects and styles links that the user has already visited. (Note: For privacy reasons, browsers limit the CSS properties that can be changed with

:visited

:visited, mostly to color-related properties).

a:hover, a:active, and a:focus

a:hover: Selects and styles a link when the user's mouse pointer is over it.

a:active: Selects and styles a link at the moment it is being clicked (between the mousedown and mouseup events).

a:focus: Selects and styles a link when it has the keyboard focus (typically when a user tabs to it). This is crucial for accessibility.

For better accessibility, it is recommended to apply the same styles to both :hover and :focus states, or, alternatively, to place :focus before :hover (LVFHA: "Last Vintage Fur Hat Available") to ensure the hover effect applies to links with keyboard focus.

Order of Pseudo-Classes (LVHA Rule)

The order in which you define these pseudo-classes in your CSS stylesheet matters due to CSS specificity rules. To ensure all states work correctly, they should be declared in the following order, often remembered by the mnemonic LVHA ("Last Vintage Hat Available"):

1.:link 1.:visited 1.:hover (or :focus, see below) 1.:active