Avoid the Number 1 CSS Mistake: a, a:visited

I used to hate CSS. I mean, I really, really hated working with CSS at all. Then, one day, I was forced to actually learn it well to design a new web site. It was rough, but I survived.

Don’t ask me why learning CSS was so painful for me, because I can program in a bazillion different languages. For whatever reason, it was just painful. I emerged victorious, however, with the help of a lot of examples I found by searching online.

There was one little problem: the vast majority of examples I found included a little bit of code that will royally screw up all your hyperlinks. So, this post is about how to avoid the #1 CSS mistake: a, a:visited.

Let’s say you have some CSS that looks like this:

.mydiv {
    padding: 10px;
    color: red;
}
.mydiv a, a:visited {
    color: blue;
    font-weight: bold;
    text-decoration: none;
}

Now, what it seems like you’re doing here is defining a class mydiv that will have a padding of 10 pixels on all sides, and the text color will be red. You apply that class to a <DIV> in your page. Then, you want to set it up so that the hyperlinks in mydiv only are bold blue text, without any underline. You think that since you entered a, a:visited that the hyperlink style will apply to both unvisited and visited URIs.

And, in fact, it may appear that your CSS is working just fine. Unfortunately, you later add some more content to the page, and you decide to style your hyperlinks in that new content in a different way. To your dismay, you discover that the bold blue link style from your mydiv is bleeding over into other hyperlink elements in your new content.

[ad name=”banner”]

This is the exact problem I have seen over and over again in countless examples on the net. Now, it may be that doing things that way will work just fine for you on your particular web page. Even if that is the case, you should still understand what your CSS is actually doing so that in the future, you’ll know how to fix it when things go wrong.

And so, without further ado, here’s the problem. This line:

.mydiv a, a:visited {

Does NOT set both unvisited and visited links in an element with class='mydiv'. What it is actually telling the browser is: “For hyperlinks in mydiv, and for visited hyperlinks on the whole page, set the style to….”

That comma that separates the a from the a:visited is tricky. What you actually intended to do is this:

.mydiv a, .mydiv a:visited {
    color: blue;
    font-weight: bold;
    text-decoration: none;
}

The above code says: “For hyperlinks in mydiv, and for visited hyperlinks in mydiv, set the style to blue, bold, and no text decoration.”

When you see a rule like this one:

a, a:visited {
    color: green;
    text-decoration: underline;
}

It’s actually setting ALL hyperlinks and ALL visited hyperlinks to green underlined text. That may be what you want. But when styling the links inside a particular page element, the class or ID of that page element must be repeated before the a and the a:visited, or the comma will make your life miserable.

Finally, keep in mind that CSS rules at the bottom of your style sheet take precedence over rules above them. So, define your overall hyperlink style first, and then put the element-specific link styles after, like so:

a, a:visited {
    color: green;
    text-decoration: underline;
}
.mydiv {
    padding: 10px;
    color: red;
}
.mydiv a, .mydiv a:visited {
    color: blue;
    font-weight: bold;
    text-decoration: none;
}

Hopefully, this will save you from a lot of CSS misery!