How do I use querySelector with data attribute and class both?

Question

My html looks like this

<div class="slds-col slds-size_1-of-1 slds-hide" data-controllinganswer="a1ZC2000000O2n3MAC" data-questionid="a1fC20000000VgXIAU" data-id="a1fC20000000VmzIAE" data-selectedanswer="a1ZC2000000O2zxMAC">

But when I try to do this

this.template.querySelector('[data-id="' + e.dataset.id + '"], .slds-show')

It still returns me an element, even though there is no class as slds-show. Is this the right way of using queryselector with multiple attributes?

Bob · Accepted Answer · 2022-06-17 06:05:01Z

4

The comma selector1, selector2 says that elements having selector1 or selector2 should match.

If you have a space selector1 selector2 it will match an element matching selector2 inside an element matching selector1, if you have selector1selector2 without space, then it matches only an element that matches both selector1 and selector2.

So your selector should be

this.template.querySelector('[data-id="' + e.dataset.id + '"].slds-show')

answered Jun 17, 2022 at 6:05

Bob

14.8k1 gold badge11 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

IVO GELOV Over a year ago

Or, in a more classic writing - .slids-show[data-id="..."]

Collectives™ on Stack Overflow

How do I use querySelector with data attribute and class both?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related