title: What characters are allowed in jQuery selectors?
body: <p>I'm am using jQuery to smooth scroll to some anchors on my website. The anchors are created programmatically so that they can contain some german umlauts like »ü, ä, ö« or other unicode characters like »ß,è« etc..
  The function uses the hash to select the element the hash is referring to:</p>
  
  <pre><code>// Smooth scroll to anchor position.
  function smoothScroll (hash) {
  
    var scrollTo = typeof $(hash).offset().top != undefined ? $(hash).offset().top: 0;
  
    $('html, body').animate({
      scrollTop: scrollTo
  
    }, 800);
  }
  
  // Test smooth scroll.
  smoothScroll ("#Akademie-für-Gestaltung");
  </code></pre>
  
  <p>This works in Chrome and Safari, but not in Firefox. It produces the following error:</p>
  
  <pre><code>Error: Syntax error, unrecognized expression: #Akademie-f%C3%BCr-Gestaltung...
  </code></pre>
  
  <p>This brings me to my question. How do I know, which characters are allowed in jQuery selectors? The <a href="https://api.jquery.com/category/selectors/" rel="nofollow noreferrer">jQuery documentation</a> mentions only the following characters <code>!"#$%&amp;'()*+,./:;&lt;=&gt;?@[\]^{|}~</code>  </p>
  
  <p>And how do I have to escape other characters, to make sure the selectors will work in all modern browser?</p>