jQuery: dealing with a space in the id attribute

Question

I have an element with id="A B". The following code fails:

<input type="text" id="A B">
<script>$("#A B").click(function(){alert();});</script>

The following code does not fail:

<input type="text" id="AB">
<script>$("#AB").click(function(){alert();});</script>

Answer 1

While it’s technically invalid to have a space in an ID attribute value in HTML (see @karim79’s answer), you can actually select it using jQuery.

See http://mothereffingcssescapes.com/#A%20B:

<script>
  // document.getElementById or similar
  document.getElementById('A B');
  // document.querySelector or similar
  $('#A\ B');
</script>

jQuery uses a Selectors API-like syntax, so you could use $('#A\ B'); to select the element with id="A B".

To target the element in CSS, you could escape it like this:

<style>
  #A B {
    background: hotpink;
  }
</style>