<a href="https://www.sitepoint.com" rel="external">SP</a>
<a href="https://developer.mozilla.org/en-US/">MDN</a>
<a href="mailto:john-smith@example.com">Email John</a>
<a href="https://www.amazon.com" class="amazon">Amazon</a>
a { display: block;}

.amazon-link {
  font-family: 'Arial';
  font-weight: bold;
  color: red;
  text-decoration: none;
}
// RE: Proposed solution to question (see link)
// https://www.sitepoint.com/community/t/or-within-complex-code/377888/11

function targetToBlank(anchor) { anchor.target = '_blank' }

function updateElements(selector, callback) {           
  document.querySelectorAll(selector).forEach(callback)
}

updateElements('a[href^="http"]', targetToBlank)

updateElements(
  'a[href^="http"].amazon',
  function (anchor) { 
    anchor.classList.add('amazon-link')
  }
)
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.