CSS Escape / Unescape
Escape text for CSS identifiers and selectors exactly like CSS.escape(), or for quoted CSS strings; unescape \HEX sequences. Handles digits, emoji, # and .
19 characters · 19 bytes (UTF-8)
0 characters · 0 bytes (UTF-8)
Runs entirely in your browser. Your data is never uploaded.
What is CSS Escape?
Escapes text so it can be used as a CSS identifier – an id or class in a selector, for example in querySelector – following the CSSOM CSS.escape() algorithm, or as content of a quoted CSS string. It also converts CSS escapes back to text.
How to use CSS Escape
- Choose Escape or Unescape.
- For escaping pick the Context: Identifier / selector (CSS.escape) or Quoted string value; optionally Escape non-ASCII as \HEX.
- Enter the id, class or string in Input and copy the Output.
Example
0a#b.c
\30 a\#b\.c
When to use CSS Escape
Use identifier mode whenever an id or class may start with a digit or contain characters like ., :, # or spaces – e.g. document.querySelector("#" + CSS.escape(id)). Use string mode for content: values or font names. It does not validate or minify CSS.
How CSS Escape works
Identifier mode follows CSSOM §2.1: NUL becomes U+FFFD; control characters, a leading digit, or a digit after a leading hyphen become \HEX code-point escapes; a lone - becomes \-; letters, digits, -, _ and non-ASCII characters stay; every other ASCII character gets a backslash (# → \#). String mode escapes \, " and ' with a backslash and control characters (including newlines) as \HEX . Unescaping reads \ plus 1–6 hex digits and one optional whitespace, removes escaped newlines and keeps other escaped characters literally.
Common Use Cases
- Selecting elements whose ids start with a digit (
#\31 23) - Building selectors from user-generated class names
- Writing special characters in
content:strings - Reading escaped selectors generated by tools
FAQs
Why does a leading digit become \3X ?
CSS identifiers cannot start with a digit, so the digit is written as its code point (1 = \31) followed by a space that ends the escape.
Is this the same as the browser’s CSS.escape()?
Yes, identifier mode implements the same specification and gives identical output.
Do I need to escape non-ASCII characters?
No, CSS files in UTF-8 can contain them directly. The option is for ASCII-only stylesheets.