Search code examples
javascriptselectors-api

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.

Solution

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

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