CSS escapes

Wondering how to escape any character in CSS? Learn how, or just use this tool ☺

HTML (edit the ID and optionally hit “permalink” to save)

<p id="
1a2b3c
">, , example</p>

Whitespace is not allowed!

The empty string is not a valid id attribute value, although it is a valid class attribute value. It’s not possible to select an element with this attribute value using document.getElementById(), document.getElementsByClassName(), or similar.

Standard CSS character escape sequences for supplementary Unicode characters aren’t supported in older versions of WebKit. It’s better to leave these characters unescaped.

CSS

<style>
  #\31 a2b3c {
    background: hotpink;
  }
</style>

JavaScript

<script>
  // document.getElementById or similar
  document.getElementById('1a2b3c'); // note: no way to make this work!
  // document.querySelector or similar
  $('#\\31 a2b3c');
</script>