103

I'm trying to find an element with document.querySelector which has multiple data-attributes:

<div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3" data-period="current">-</div>

I thought about something like this:

document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"] [data-period="current"]')

But it does not work.
However, it works well, if I put the second data-attribute in a child-element like:

<div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"> <span data-period="current">-</span> </div>

So, is there an option to search for both attributes at once?
I've tried several options but I don't get it.

vsync
  • 118,978
  • 58
  • 307
  • 400
wiesson
  • 6,544
  • 5
  • 40
  • 68

3 Answers3

173

There should not be a space between the 2 selectors

document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"][data-period="current"]')

if you give a space between them it will become a descendant selector, ie it will search for an element attribute data-period="current" which is inside an element with data-point-id="7febe088-4eca-493b-8455-385b39ad30e3" like

<div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3">
    <div data-period="current">-</div>
</div>
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
  • 1
    @TamásMárton That's not correct. "So, a valid unquoted attribute value in CSS is any string of text that is not the empty string, is not just a hyphen (-), consists of escaped characters and/or characters matching /[-_\u00A0-\u10FFFF]/ entirely, and doesn’t start with a digit or two hyphens or a hyphen followed by a digit." https://mathiasbynens.be/notes/unquoted-attribute-values#css – yckart Jul 08 '18 at 13:08
  • @yckart I wrote it based on an a Firefox observation which I repeated many times. But it seems I either messed up something or bumped into a bug, because the selector works properly with unquoted attribute values now. Thanks for pointing out. (For the record: I deleted my misleading, unnecessary comment.) – Márton Tamás Jul 08 '18 at 14:36
10

space in selector looks for [data-period="current"] in[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"] .You don't need to put space in between attribute value selector:

document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"][data-period="current"]')
Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125
1

This is how I came up with a solution for selecting a specific class by multiple dataset attributes.

document.querySelector('.text-right[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"][data-period="current"]')

What you thought was correct, however you just needed to specify the class you were trying to select.

pabscode
  • 51
  • 6