Help with the :link pseudo-property

So the :link CSS pseudo-property lets you style links that have not yet been visited and is attached to the “a” selector. But why would you need that when you can just use the “a” selector to style links. Im just missing the difference between just styling links with the “a” selector and using the :link property

Also, when youre testing a site how can you tell the browser to reset the visited status? I want to be able to refresh the page so the links are fresh and not visited

One would indeed use the <a> tag to apply default styles to the anchor, then use the :link pseudo-class to apply styles specific to the unvisited link and :visited to apply styles specific to the visited link; likewise, one would use the :hover and :active pseudo-classes to apply styles appropriate to those states. In addition, one would use the :focus pseudo-class to style the link so keyboard users and others will be able to see which link will be active should they press the return key.

Styling the links in this way is done to provide feedback to the user.

Whether to provide feedback is a design decision. Links in a business’ main menu might not be styled to indicate :visited coloring, for example.

This is a quickie example of a vertical menu that uses the 5 pseudo-classes discussed.


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1212867-Help-with-the-link-pseudo-property
2014.06.20 12:23
FcknDrrn
-->
    <style type="text/css">
*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.menu {
    width:250px;
    background-color:#ffd653;
    padding:10px;
}
.menu ul {
    list-style-type:none;
    font-family:Georgia,'MS Serif',serif;
    font-size:16px;
    font-weight:bold;
    padding:0;
    margin:0;
}
.menu li {
    margin-bottom:1px;
}
.menu a {
    display:block;
    border:1px solid #ffd653;
    -moz-border-radius:5px;
    border-radius:5px;
    text-decoration:none;
    outline:0 none;
    padding:6px 6px 7px 24px;
}
.menu a:link {color:#00f;}                                               /* unvisited link  */
.menu a:visited {color:#800080;}                                         /* visited link    */
.menu a:hover {color:#00f;background-color:#f0f0f0;border-color:#aaa;}   /* mouse-over link */
.menu a:focus {border-color:#aaa;}
.menu a:active {color:#f00;background-color:#f0f0f0;border-color:#aaa;}  /* mouse-down link */

    </style>
</head>
<body>
<div class="menu">
    <ul>
        <li><a href="/">1 First Link</a></li>
        <li><a href="#">2 Second Link</a></li>
        <li><a href="#">3 Third Link</a></li>
        <li><a href="/">4 Fourth Link</a></li>
        <li><a href="/">5 Fifth Link</a></li>
        <li><a href="#">6 Sixth Link</a></li>
    </ul>
</div>
</body>
</html>


You cannot “reset” the links on a site so the browser no longer colors them :visited. The memory of having accessed a URL exists in the browser, not the site. Users who do not want their browser to remember where they have been can turn that memory off. I’m not sure if turning that memory off erases any existing memory or not, but I would think that it does. If so, that is how you might clear the memory in a particular browser.

So in your example, why couldn’t you put the styling for a:link in the a { section or vise versa? As in, isnt the styling applied by the base “a” selector already for unvisited links? Or is it just used to separate base from unvisited links just for organizational perposes? Thanks for the help

Yeah, a little confusing. I never use :link for that reason. I think that there is the distinction, though, because not all <a> elements are necessarily “links”, so you can distinguish between them. But that’s a vague notion on my part that may be quite wrong.

Organizational purposes. Styles that apply to all anchors and pseudo-classes are assigned to the <a> tag. Styles that are unique to each pseudo-class are put in the appropriate pseudo-class. I used to put all default and link styles in the a:link selector, but over time found it more logical and efficient to segregate the styles. Coder’s choice.

I’m using Firefox with the Web Developer Toolbar: http://chrispederick.com/work/web-developer/ which is also available for Chrome and Opera. Under the “Miscellaneous” menu there is an option to “Toggle Visited Links”, where you can mark all links either as visited or unvisited.