Style Links Depending on Destination

a[href^="http://"] {
        /* fully valid URL, likely external link */
}

a[href="http://google.com"] {
        /* link to specific website */
}

a[href^="/"], a[href^=".."] {
        /* internal relative link */
}

a[href^="mailto:"] {
        /* email link */
}

a[href$=".pdf"] {
        /* PDF file */
}

a[href$=".doc"] {
        /* Microsoft Word document */
}

a[href$=".mp3"] {
        /* Music file */
}

a[href$=".zip"] {
        /* Archive file */
}

3 Responses

1. Richard says:

   08/10/2010 at 6:36 am

   Wow! This is really neat! I’m sure I’ve seen it before but you’ve displayed it in an easy-to-understand way!

   I just have a couple of questions:

   1) I imagine that ^ means “beings with”; does $ mean “ends with” or “includes this text somewhere”?

   2) Full cross-browser support? IE?

   Thanks!

   Reply
   • Brian says:

     08/10/2010 at 1:30 pm

     $ is indeed “ends with” (“includes this text somewhere” is [attr*="textanywhere"])

     IE7+ has support for it

     http://www.quirksmode.org/css/contents.html (“Advanced [attr] selectors”)

     Reply
2. e11world says:

   10/13/2010 at 12:19 am

   This is pretty handy. I’ve been using this method for nearly two years now. I saw a couple of new things here though. Thanks for sharing!

   Reply