Using :not() to mark all outgoing links of a site

Sometimes you have a pre-rendered HTML and you want CSS to show an indicator what links are internal and external to your site. Let's see how!

Transcript

1. .consulting .solutions .partnership Using :not() to mark all outgoing links of a site Alexander Schwartz, Principal IT Consultant
2. How do I add a small icon to outgoing links? © msg | March 2019 | Using :not() to mark all outgoing links of a site | Alexander Schwartz 2 The Problem 1. https://www.ahus1.de/post/cdn-for-simplicity#summary External Link Internal Link
3. HTML Samples HTML Samples for internal and outgoing links © msg | March 2019 | Using :not() to mark all outgoing links of a site | Alexander Schwartz 3 <a href="https://jamstack.org/">JAMstack</a> <a href="/aboutme">contact me via a direct message on twitter or via email</a> <a itemprop="url" title="Twitter" target="_blank" href="https://twitter.com/intent/..." rel="noopener" class="button is-info">Tweet</span></a> External Link, same window: add mark Button, external link: no mark Internal Link: no mark
4. CSS Solutions 1. https://developer.mozilla.org/en-US/docs/Web/CSS/:not 2. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors Using the :not() pseudo-class and attribute selectors © msg | March 2019 | Using :not() to mark all outgoing links of a site | Alexander Schwartz 4 /* <p> elements that are not in the class `.fancy` */ p:not(.fancy) { color: green; } /* <a> elements with an href matching "https://example.org" */ a[href="https://example.org"] { color: green; }
5. Can I use :not()? © msg | March 2019 | Using :not() to mark all outgoing links of a site | Alexander Schwartz 5 CSS Basis 1. https://caniuse.com/#feat=css-sel3
6. CSS Solutions Opening in new tab or other domain © msg | March 2019 | Using :not() to mark all outgoing links of a site | Alexander Schwartz 6 a[target="_blank"]:not( [title] )::after { // arrow upper right // alternative: \29C9 (two window) content: '\00A0\2197'; vertical-align: text-top; font-size: 75%; } a:not( [href*='ahus1.de'] ):not( [href^='#'] ):not( [href^='/'] ):not( [href^='mailto:'] ):not( [title] )::after { /* ... */ } :not() tends to attract more :not()s… you might end up with unmaintainable code soon. Be careful! (thanks to @mirjam_diala for pointing this out)
7. Docs https://developer.mozilla.org/en-US/docs/Web/CSS/:not https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors Can I Use https://caniuse.com/#feat=css-sel3 Example Site https://www.ahus1.de/post/cdn-for-simplicity Performance of CSS Selectors Is Still Irrelevant https://meiert.com/en/blog/performance-of-css-selectors-2/ Links © msg | March 2019 | Using :not() to mark all outgoing links of a site | Alexander Schwartz 7 @ahus1de
8. .consulting .solutions .partnership Alexander Schwartz Principal IT Consultant +49 171 5625767 alexander.schwartz@msg.group msg systems ag Mergenthalerallee 73-75, 65760 Eschborn Deutschland www.msg.group