title: Which characters are in document.querySelector allowed?
body: <p>At the moment I'm writing a webchat, in wich the user can open a new room with URI-GET params. The php part creates the html and sends it to the browser.
  But if the user types in the URI something like <code>/?Mychat%20%231</code> my php sends a chat named <code>Mychat_#1</code>.
  This still works correct but when I try to refresh the chat (every second) I always get</p>
  
  <blockquote>SyntaxError: 'section.Mychat_#1' is not a valid selector</blockquote>
  
  <p>Every chat looks like this:</p>
  
  <pre><code>&lt;section class="chat-container chat_name_#1"&gt;&lt;!-- &lt;- I try to get this node via the chat name --&gt;
      &lt;header&gt;
          chat_name_#1
      &lt;/header&gt;
      &lt;div class="msg-container" style=""&gt;
          &lt;section&gt;&lt;!-- here the messages will be inserted --&gt;&lt;/section&gt;
      &lt;/div&gt;
      &lt;footer&gt;
          &lt;div class="msg"&gt;
              &lt;input name="msg" autocomplete="off" type="text"&gt;
          &lt;/div&gt;
          &lt;div class="btn"&gt;
              &lt;button&gt;senden&lt;/button&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>in my main.js file I tried to get the node with document.querySelector</p>
  
  <pre><code>for(DATA in CHAT){
      let chat = document.querySelector('section.' + CHAT[DATA].title);
      // ...
  }
  </code></pre>
  
  <p>Normal the hashtag character is allowed in class names (if they don't start with it)
  <hr>
  My Question is not a duplicate of <a href="https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors">Which characters are valid in CSS class names/selectors</a>.</p>
  
  <p>Before I asked it, I searched on google and find it too. 
  I read it but there was only explained, what <b>css</b> selectors are allowed. In my case it unfortunately didn't help.</p>