Code Snippet

Home » Code Snippets » CSS » Style Links Depending on Destination

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 */
}

Subscribe to The Thread

  1. Richard

    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 ↓
  2. e11world

    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 ↓
  3. Thao

    For the “link to specific website”, would declaring google.com cover all subdirectories of google.com (ie: google.com/images, google.com/analytics etc?). Or would they need to be specifically declared?

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~