Grow your CSS skills. Land your dream job.

Last updated on:

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

Comments

  1. Permalink to comment#

    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!

  2. Permalink to comment#

    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!

  3. Thao
    Permalink to comment#

    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?

  4. Permalink to comment#

    This is my first time encountering this CSS trick and I love it. I was at first a little stymied by it as I needed to style links on my site that had certain text in the URL. Just a bunch of links to products that I wanted to be styled similar to the product’s brand. For this I needed to style links going to any products that had the brand’s name in the URL.

    I used a[href*=”/brand-name”] and other variations of that to get it done and I’m loving it.

    Out of curiosity though, what is this called? This cool trick in the brackets?

    Thanks for this awesome post!

  5. Rumman Amin

    How would I use this for relative links that contain a unique user ID (Drupal) ie: /user/1/bookmarks

  6. Sg
    Permalink to comment#

    Hi,

    Thanks for these options. Is there a way to say

    Apply this style if the href does not contain the word “archives”

    Thanks in advance
    Shilpi

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".