Browsers allow you to define your own stylesheet that’s applied to every page you visit. For the longest time I’ve wondered why anyone would ever want this feature. I figured it would be useful for people with poor vision or other disabilities and that was about it.

But combined with some neat features of CSS, one can come up with interesting uses of user stylesheets. Consider the following:

a[rel~=”nofollow”] {
text-shadow: rgba(255,0,0,0.25) 1px 1px 1px;
}

This rule uses the partial attribute value selector to give all hyperlinks with the rel=”nofollow” attribute a slight red shadow (like the preceding link, if your browser supports text-shadow).

Why would you want this? Well, for me, pure curiosity. But SEOs or spammers may find it enlightening though.

For example, the first thing I noticed was that on the Hacker News homepage links to external sites newer than 3 or 4 hours have the nofollow attribute, but older ones do not – clearly a spam deterrent.

There are many other useful and interesting scenarios. Say you want to highlight all PDF or MP3 links (“$=” matches the end of an attribute):

a[href$=.pdf], a[href$=.mp3] {
text-shadow: rgba(0,255,0,0.25) 1px 1px 1px;
}

Or email links (“^=” matches the beginning of an attribute):

a[href^=mailto] {
text-shadow: rgba(0,0,255,0.25) 1px 1px 1px;
}

Note that I used text shadows, but anything styleable by CSS is fair game.

With April fools day approaching, one could imagine other creative uses. I’ll leave that as an exercise to the reader.