Pseudo-Class Selector Order

Interesting tidbit I learned today with using pseudo classes. As I’m sure anyone reading this article knows, with pseudo-classes you can style links in different ways in each of the four states.

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

The selector that specified later in the stylesheet will be used if there is any conflict. For this reason, link and link pseudo class selectors should always be used in the following order:

1. a {}
2. a:link {}
3. a:visited {}
4. a:hover {}
5. a:active {}

You can combine states if needed, as long as the order (link and visited before hover and active) is maintained:

• a:link, a:visited { color: blue; }
• a:hover, a:active { color: red; }