Link Pseudo-Classes (In Order)

a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}

Link, Visited, Hover, Active
L, V, H, A
LoVe, HAte

Comments

  1. User Avatar
    Hilbrand Edskes
    Permalink to comment#

    Note that hover won’t work for people who use a keyboard rather than a mouse.
    In order to make this effect keyboard-accessible, you must also use the focus pseudo class. This class is activated when the user tabs to a link.
    When you don’t include the focus pseudo class and use outline: 0; on your links, keyboard users won’t even be able to see which link is activated at all, which results in bad usability for keyboard users.a:focus {color: green;}
    Most of the time it makes sense to apply the same styles to both hover and focus, in order to make sure both mouse users and keyboard users will see the same effect.
    Further you can ensure better cross-browser compatibility for the effect (because Internet Explorer handles pseudo classes differently) by adding also the active pseudo class. A link becomes active a short time when the user is actually clicking on the link.a:hover,
    a:focus,
    a:active {color:red;}

    The active pseudo class can also be used to create a special button pressing effect during the short time when the user is clicking on the link.
    By moving the link 1 pixel to the right and 1 pixel down it will appear that the link is being pushed like a button when clicked.a:active {position:relative;top:1px;left:1px;}

  2. User Avatar
    Sunny Singh
    Permalink to comment#

    Is the point of :link to simply style anything with the href attribute? For example, it would not affect something like Test

  3. User Avatar
    Skweekah
    Permalink to comment#

    This is one that people arent aware of. Why dont my links style properly? Check your order!
    BTW Mr Coyier, this is one of the best CSS sites on the Net. Big achievement mate.

  4. User Avatar
    BumbleB2na
    Permalink to comment#

    Your “LoVe, HAte” reminder is so helpful. It’s like the “SohCahToa” of css

  5. User Avatar
    girlwithglasses

    I use ‘Lord Vader’s Handle Formerly Anakin’ as the mnemonic for ordering link pseudoclasses:

    :link, :visited, :hover, :focus, :active

  6. User Avatar
    Jean
    Permalink to comment#

    I use “Lord Vader Hates Furry Animals” as the mnemonic. The animals are Ewoks :P

  7. User Avatar
    shrikant
    Permalink to comment#

    Thanks jean that’s was a good idea about LoVe HAte

  8. User Avatar
    Christopher James Francis Rodgers
    Permalink to comment#

    Hilbrand Edskes:

    Re:
    a:active {position:relative;top:1px;left:1px;}

    That is most excellent, and is now a permanent addition to my CSS.

    (..oops.. I guess I should follow the moderator’s recommendation, and “Be cool”, so..)

    “Cool.”

    That’s was it is, Hilbrand. “Cool.”

    ..Bloody cool. I love it.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag