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!
.consulting .solutions .partnershipUsing :not() to mark all outgoing links of a siteAlexander Schwartz, Principal IT Consultant
View Slide
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 2The Problem1. https://www.ahus1.de/post/cdn-for-simplicity#summaryExternal LinkInternal Link
HTML SamplesHTML Samples for internal and outgoing links© msg | March 2019 | Using :not() to mark all outgoing links of a site | Alexander Schwartz 3JAMstackcontact me via a directmessage on twitter or via emailhref="https://twitter.com/intent/..." rel="noopener"class="button is-info">TweetExternal Link, same window:add markButton, external link:no markInternal Link:no mark
CSS Solutions1. https://developer.mozilla.org/en-US/docs/Web/CSS/:not2. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectorsUsing the :not() pseudo-class and attribute selectors© msg | March 2019 | Using :not() to mark all outgoing links of a site | Alexander Schwartz 4/* elements that are not inthe class `.fancy` */p:not(.fancy) {color: green;}/* elements with an href matching"https://example.org" */a[href="https://example.org"] {color: green;}
Can I use :not()?© msg | March 2019 | Using :not() to mark all outgoing links of a site | Alexander Schwartz 5CSS Basis1. https://caniuse.com/#feat=css-sel3
CSS SolutionsOpening in new tab or other domain© msg | March 2019 | Using :not() to mark all outgoing links of a site | Alexander Schwartz 6a[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 toattract more :not()s…you might end up with unmaintainablecode soon. Be careful!(thanks to @mirjam_dialafor pointing this out)
Docshttps://developer.mozilla.org/en-US/docs/Web/CSS/:nothttps://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectorsCan I Usehttps://caniuse.com/#feat=css-sel3Example Sitehttps://www.ahus1.de/post/cdn-for-simplicityPerformance of CSS Selectors Is Still Irrelevanthttps://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
.consulting .solutions .partnershipAlexander SchwartzPrincipal IT Consultant+49 171 5625767[email protected]msg systems agMergenthalerallee 73-75, 65760 EschbornDeutschlandwww.msg.group