CODEWITHSUNDEEP
javascriptcss-selectors
Sergej Matsypa
Sergej Matsypa

Reputation: 439

querySelectorAll with including AND excluding attribute conditions (both)

The task is to find all elements which have values in "href" attribute, which suit 2 conditions at the same time:

  1. they contain :// string
  2. they not starting with http://internal.com string

So I need something like

const targetHrefs = document.querySelectorAll('[name="list"] ~ ul > li > a[href*="://"][href^="http://internal.com"]');

where the 2nd condtion should be with operator NOT

Is it possible using the only CSS Selector rule?

Upvotes: 1

Views: 448

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370979

Just put it in a :not?

const targetHrefs = document.querySelectorAll('a[href*="://"]:not([href^="http://internal.com"])');
console.log(targetHrefs.length);
console.log(targetHrefs[0]);
<a href="foo"></a>
<a href="https://example.com/"></a>
<a href="http://internal.com/"></a>

Upvotes: 2

Related Questions