CSS escape
Useful when selecting an id that starts with a digit or holds symbols, or writing Arabic inside the content property.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Enter text and use.
- The result appears straight away and updates as you edit.
- Copy the result, or copy a link that keeps the same values to share it.
How it is calculated
Selector mode follows the CSSOM serialize-an-identifier algorithm: a leading digit becomes \3X plus a space, non-word symbols get a backslash, and characters above 127 stay. Content mode writes each non-ASCII character as a backslash and its hex code, plus a space when a hex digit follows.
Example
Inputs: Use = Selector, class or id name. Result: Escaped CSS: \31 st-item\.active.
1st-item.active
\31 st-item\.active
Limits and caveats
- Selector mode escapes one name, so do not paste a whole selector with combinators unless you want them escaped.
- Arabic letters are valid in selectors unescaped, so they stay as they are in that mode.
Questions about this tool
Why does the selector #1st fail?
A CSS identifier cannot start with a digit, so write #\31 st; the space after \31 is part of the escape.
How do I put Arabic text in content safely?
Use content mode to get codes like \645\631 that work even if the stylesheet is saved in another encoding.
Is it the same as the browser CSS.escape?
Yes in selector mode; it applies the same algorithm from the CSSOM specification.