CSS Web development

Order pseudo-classes

The order of definition of pseudo-classes for the anchor tag is crucial.

In Firefox I noted that if you define :visited after :hover, you may not get the style you expect when hovering over an <a> element. That’s logical, if you think of it. But it can be confusing because the Inspector seems to ignore the style for :visited, leaving us clueless.

Looking for clues I checked Chrome too. The problem did not occur there, but that was because I hadn’t visited the page the link was pointing to yet.

The recommended order is

  • :link
  • :visited
  • :hover
  • :active