Doug Fir Doug Fir - 1 year ago 86
Javascript Question

querySelectorAll where class does not contain 'hide'

document.querySelectorAll('.giftUpsell-offer-desc + a')

Returns 3 a elements:

<a href=​"https:​/​/​" class=​"button button--primary button--wide u-hide" someattribute="fish">​
Extend & Save
​</a>​, <a href=​"" class=​"button button--primary button--wide u-hide" someattribute="cats">​
Extend & Save
​</a>​, <a href=​"" class=​"button button--primary button--wide" someattribute="dogs">​
Extend & Save

I need to find the value of "someattribute" where the element is currently visible. I know the element with class attribute not containing "hide" is the one I want.

How could I edit my above selector to return this specific
element? In this example the one for dogs.

Answer Source

Use the :not(<selector>) pseudo-class:

.giftUpsell-offer-desc + a:not(.u-hide)
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download