CodePen

HTML

            
              <style data-hitch-interpret>
		a:-links-external() {
			background-color: yellow;
		}
</style>

<p>These should be unstyled because they are not external
		<a href="/">/</a>
		<a href="/index.html">/index.html</a>
		<a href="/sale.html">/sale.html</a>
		<a href="foo/bar.html">foo/bar.html</a>
		<a href="#test">#test</a>
</p>
 
<p>
		These should be yellow because they are external
		<a href="http://google.com">http://google.com/</a>
		<a href="http://hitchjs.com">http://hitchjs.com</a>   	
</p>

<p>CodePen link (varies depending on view)
  <a href="http://codepen.io">http://codepen.io</a>
</p>
	   	
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              Hitch.add([{
  
  type: 'selector',
  name: '-links-external', 
  base: '[href]',
  filter: function (match, argsString, o) {
    if (!match.hostname) {  
      return false;
    }
    return match.hostname !== window.location.hostname;
  }
  
}]);
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................