title: Escaping characters in CSS class selectors
body: <p>I'm trying to implement <a href="http://www.w3.org/International/questions/qa-escapes#cssescapes" rel="noreferrer">this W3</a> description of character escapes in CSS class selectors.</p>
  
  <p>I'm running into problems with the <code>abc\20 def</code> syntax that puts a space after the escape sequence to ensure <code>def</code> is not misread as part of the character code.</p>
  
  <p>Specifically, trying to put <code>abc\XY def</code> into an HTML class attribute or into a command like <code>jQuery().addClass('abc\\20 def')</code> (the <code>\\</code> here is part of the JS string literal syntax; the string value itself has one slash) will both give the element two classes, <code>abc\20</code> and <code>def</code>.</p>
  
  <p>Is this syntax just badly implemented, and I should stick with the six-digit leading zero form? Or does that document only refer to the escape format in CSS code, and the HTML attribute / jQuery argument require some different form of escaping the space character?</p>
  
  <p><strong>Edit</strong>: Thank you very much for explaining, everyone!</p>
  
  <p>I now understand that this syntax only applies to CSS code - not the class names themselves as set in HTML attributes or Javascript.</p>
  
  <p>This also means that characters designated as whitespace <em>can't</em> occur in CSS class values, and no kind of escape mechanism allows them to be added. (Specifically, if I understand correctly, the CSS selector <code>.abc\20 def</code> is valid and selects elements with the class <code>abc def</code>, but is meaningless because no element can have this class.)</p>
  
  <p>For my concrete use case, which involves <strong>mapping arbitrary values (which <em>can</em> have white space) to valid class names</strong>, I need to define my own escape scheme. Replacing whitespace with <code>-</code> or <code>_</code> (thanks Praveen) is one possibility; if the mapping needs to be one-to-one, replacing them with six-digit Unicode hex values (eg. <code>"abc def" -&gt; "abc\000020def"</code>  is a more robust one.</p>
  
  <p>The important thing to keep in mind is that this replacement affects the class name itself - to refer to the class <code>abc\000020def</code> in CSS, the backslash must be escaped again, to form the selector <code>.abc\\000020def</code>.</p>