DevHints

CSS: Compounding multiple pseudo-selectors to take links one step further

Posted on: May 23, 2007

It’s 2am and I’m up working on a website. It’s fairly typical. And while most people would doubt my productivity at such an hour given that I’m awake all day, I have proof of productivity (and creativity).

I was playing with a layout revision of one of my websites when I got to doing the links. Typically I do something plain-jane like this:

a:link, a:visited { color: #000; text-decoration: none; }
a:hover, a:active { color: #333; text-decoration: underline; }

That makes a neat little link that goes from plain black to a dark gray with an underline when hovered over. Nothing special. Of course, I mix in all sorts of fun colors and I do background color changes too. Tonight was different though.

I decided I wanted to do something to help visitors keep track of where they’d been by styling “visited” links differently. After seeing a few people (most notably Mike Davidson) do the little check boxes, I figured it wasn’t a half bad idea. Mike uses the :after pseudo selector to add the checkbox to visited links. Not a bad idea, but it won’t work in IE and it makes changing it on hover difficult and choppy. I had a better idea.

I used the background property. I had just used the same method for my list bullets, so it was still fresh in my mind. Simplified, we had the following:

a:link, a:visited { color: #000; text-decoration: none; }
a:visited { background: url(‘images/check.png’) right 60% no-repeat; }

I used 60% because it achieved better alignment in my situation than center and it scales better than pixels. Now my little visited links had neat little checkboxes next to them. Awesome. But now my hover style didn’t look quite right since I was changing the background color on hover. This is when I started thinking…what if I could tell the browser to change the background on hover over a visited link? Well, it looks like you can:

a:link, a:visited { color: #000; text-decoration: none; }
a:visited { background: url(‘images/check.png’) right 60% no-repeat; }
a:visited:hover { background-image: url(‘images/check_hover.png’); }

I actually originally had the hover and visited pseudo-selectors swapped the other way around (:hover:visited) but IE didn’t want to cooperate, so I got to thinking what I was really telling it (apply this to anchor tags when they are being hovered over that are visited) and how it made more sense if I flipped it (apply this to anchor tags that have been visited when they are being hovered over). Sure enough, it worked like a charm.

NOTE: While this method does allow for more customization and it works with IE, Mike’s method is better from an accessibility standpoint since it doesn’t use an image.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: