Tell HN: A CSS3 selector for outbound links

1 point

15 years ago

So I ran across all the new selectors that CSS3 provides again, and rediscovered :not(). Even though there aren't any Regular Expressions for attribute matching, It actually lets you do some nice conditioning. Consider this:

  article a[href^=”http”]:not([href*="yourdomain.com/"]) {
    font-weight: bold;
  }

This will match all links within an article that begin with http, but don't contain your domain name. Essentially those are external links, with the exception of maybe http://facebook.com/yourdomain.com/ and alike.

If you're certain that all your links will rewrite to and absolute path with the www subdomain through unencrypted http protocol, you can even match more efficiently:

  article a {
    external-link: style;
  }

  article a[href^="http://www.yourdomain.com"] {
    your-link: style;
  }

For matching all links that don't contain your domain name (mailto, skype) and so on:

  a[href*=":"]:not([href*="yourdomain.com])

However, make sure you narrow that selector down to the specific piece of content where you want outbound links marked, as it will probably match javascript: links. But you should make sure those have a fallback url and behave with JavaScript anyway.

Hope this turns a few JavaScript lines into CSS for you.

Cheers! Links and tips at: http://twitter.com/some1else