title: document.querySelectorAll :not with multiple :not(s)
body: <p>Sorry in advance - there are SO many variances of this question on SO, but none have resolved my issue. I have read so many variations that I am now completely confused on how to do this.</p>
  
  <p>I have this Javascript function that appends UTM params to all offsite links except those with specific classes as such:</p>
  
  <pre><code>// Set the domain/URL of website.
  
  var myDomain = "domain.com";
  
  // Grab all links (anchor tags)
  var links = document.querySelectorAll('a:not(.this-class)');
  
  // Loop through all links
  Array.prototype.forEach.call(links, function (link) {
  
  // If a link goes offsite (not to my myDomain above)
  if ( link.href.indexOf(myDomain) &lt; 0 ) {
  
  // Take the href and append the UTM parameters
  link.href += '?utm_source=CampaignSource&amp;utm_medium=CampaignMedium&amp;utm_term=CampaignTerm&amp;utm_content=CampaignContent&amp;utm_campaign=CampaignName';
      }   
  })
  </code></pre>
  
  <p>Now, I need to prevent appending to</p>
  
  <pre><code>ul.another_class li a
  </code></pre>
  
  <p>I have tried a myriad of syntaxes and formats, but just can't get it to work correctly. Such as</p>
  
  <pre><code>var links = document.querySelectorAll('a:not(.this-class),ul:not(.another_class li a)');
  </code></pre>
  
  <p>and way too many more to list here. The selector <em>ul.another_class li a</em>, only the <em>ul</em> has a class - neither the <em>li</em> nor the <em>a</em> does.</p>
  
  <p>So, my question is both about the correct <em>:not</em> selector syntax AND the proper statement syntax. It is supposed to be</p>
  
  <pre><code>('a:not(.this-class), ul:not(.another_class li a)');
  </code></pre>
  
  <p>or</p>
  
  <pre><code>('a:not(.this-class), ul.another_class:not(li a)');
  </code></pre>
  
  <p>or something else? I appreciate your expertise.</p>