title: document.querySelector multiple data-attributes in one element
body: <p>I'm trying to find an element with <code>document.querySelector</code> which has <em>multiple data-attributes</em>:</p>
  
  <pre><code>&lt;div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3" data-period="current"&gt;-&lt;/div&gt;
  </code></pre>
  
  <p>I thought about something like this:</p>
  
  <pre><code>document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"] [data-period="current"]')
  </code></pre>
  
  <p>But it does not work. <br>
  However, it works well, if I put the second data-attribute in a child-element like:</p>
  
  <pre><code>&lt;div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"&gt; &lt;span data-period="current"&gt;-&lt;/span&gt; &lt;/div&gt;
  </code></pre>
  
  <p>So, is there an option to search for <strong>both attributes at once</strong>?<br>I've tried several options but I don't get it.</p>