CODEWITHSUNDEEP
javascript
user280109
user280109

Reputation: 1476

Why does the order of the selectors in a queryselector call matter?

I think i may have found a bug in the querySelector function. It seems that the order the selectors are placed affects whether or not the selectors are selected.

I'm trying to select a link using querySelector, and am passing in 3 different selectors, and would like it to select any one of those 3, unfortunately, sometimes it won't match the selector even when there is a definite match on the page, unless I rearrange the order of the selectors in the querySelector function.

Test link that i want to match: <a href="https://www.facebook.com/hashtag/coyotes?source=ftp"><span>#Coyotes</span> 60 recent posts</a>

This function returns null:

document.querySelector("a[href$='?source=fttp']","a[href$='?source=ftp']","a[href^='/topic/']")

This function call matches the link

document.querySelector("a[href$='?source=ftp']","a[href^='/topic/']","a[href$='?source=fttp']")

both calls have the exact same selectors, only in a different order

I've created a jsfiddle that demonstrates the problem: http://jsfiddle.net/eB8nv/5/

Can anyone tell me what is going on here, and why the order of the selectors sent to the querySelector function matters?

Upvotes: 0

Views: 199

Answers (1)

SLaks
SLaks

Reputation: 888203

querySelector() only takes one parameter.
You can't do that.

Instead, you need to pass a single string with three comma-separated selectors.

Upvotes: 4

Related Questions