title: querySelector not working with class but work with id
body: <p>I've the below <code>html</code> block:</p>
  
  <pre><code>    &lt;a class="item"&gt;
        &lt;i class="sign out icon" id="out1"&gt;&lt;/i&gt;
        &lt;span class="text out" id="out2"&gt;Sign out&lt;/span&gt;
      &lt;/a&gt;
  </code></pre>
  
  <p>I need to trigger an action if any of the elements inside the <code>a</code> is clicked, the below code is working fine when I use the items <code>id</code>:</p>
  
  <pre><code>document.querySelector("#out1, #out2").onclick = function(e) {}
  </code></pre>
  
  <p>But the below is not working when I'm trying the items <code>class</code>:</p>
  
  <pre><code>document.querySelector(".sign .out .icon, .text .out").onclick = function(e) {}
  </code></pre>
  
  <p>I tried to make it simple by the below, but it did not work as well:</p>
  
  <pre><code>document.querySelectorAll(".out").onclick = function(e) {}
  </code></pre>