document.querySelectorAll :not with multiple :not(s)

Question

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.

I have this Javascript function that appends UTM params to all offsite links except those with specific classes as such:

// 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) < 0 ) {

// Take the href and append the UTM parameters
link.href += '?utm_source=CampaignSource&utm_medium=CampaignMedium&utm_term=CampaignTerm&utm_content=CampaignContent&utm_campaign=CampaignName';
    }   
})

Now, I need to prevent appending to

ul.another_class li a

I have tried a myriad of syntaxes and formats, but just can't get it to work correctly. Such as

var links = document.querySelectorAll('a:not(.this-class),ul:not(.another_class li a)');

and way too many more to list here. The selector ul.another_class li a , only the ul has a class - neither the li nor the a does.

So, my question is both about the correct :not selector syntax AND the proper statement syntax. It is supposed to be

('a:not(.this-class), ul:not(.another_class li a)');

or

('a:not(.this-class), ul.another_class:not(li a)');

or something else? I appreciate your expertise.

Answer 1

It's not possible concisely with a single selector, because there is no parent selector . I think the best thing to do here would be to filter out the ul.another_class li a afterwards:

for (const a of document.querySelectorAll('a:not(.this-class)')) {
  if (!a.matches('ul.another_class li a')) {
    // manipulate the href
  }
}