Doug Fir Doug Fir - 2 months ago 6
Javascript Question

querySelectorAll where class does not contain 'hide'

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


Returns 3 a elements:

[
<a href=​"https:​/​/​www.qa.example.com" class=​"button button--primary button--wide u-hide" someattribute="fish">​
Extend & Save
​</a>​, <a href=​"www.qa.example.com" class=​"button button--primary button--wide u-hide" someattribute="cats">​
Extend & Save
​</a>​, <a href=​"www.qa.example.com" class=​"button button--primary button--wide" someattribute="dogs">​
Extend & Save
​</a>​
]


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
<a>
element? In this example the one for dogs.

Answer

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

.giftUpsell-offer-desc + a:not(.u-hide)
Comments