Link selector: exclude class

[drivebass]

I'm trying to exclude links with class ".noswup" from swup by adding the selector in the options, but I get errors. Problem is that I can't add the data attribute data-no-swup to the specific element. I;m just adding a rule to the default link selector like this:

linkSelector: 'a[href^="' + window.location.origin + '"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[href^="#"]:not(".no-swup")',

I thought this would be simplier but I can't figure out what's the right way to do this?

[daun]

Update: since swup 3, you can use the ignoreVisit option to exclude links much more easily:

const swup = new Swup({
  ignoreVisit: (url, { el }) => el?.matches('.noswup, [data-no-swup]');
})

Previous answer for swup 2:

The selector is additive, so adding one rule at the end won't be enough. You'll need to add the :not() part after every selector, the same way it was done with data-no-swup. If you replace :not([data-no-swup]) with :not(.no-swup), you should be fine. The classname isn't supposed to have quote marks around it either way.

[drivebass]

Hi @daun,
Thanks for your feedback. I'd like to keep data-no-swup and have .no-swup class as another exclusion. Links with data-no-swup OR class .no-swup should be excluded. And it's only for links with href="#" though. So, should I do it like this:

linkSelector: 'a[href^="' + window.location.origin + '"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[href^="' + window.location.origin + '"]:not(.no-swup), a[href^="/"]:not(.no-swup), a[href^="#"]:not(.no-swup)'

[daun]

You'll have to combine both negations to exclude both: a:not([data-no-swup]):not(.no-swup).

Some browsers support combining :not conditions, but I'm not sure all of them do: a:not([data-no-swup], .no-swup).

[drivebass]

So in order to exclude only hash links href="#", I'd have to add this a[href^="#"]:not([data-no-swup]):not(.no-swup) in the linkSelector, like the following:

linkSelector: 'a[href^="' + window.location.origin + '"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]):not(.no-swup)'

It works! Thank you!

[daun]

Exactly!