CSS Escape — Escape Special Characters for CSS Online
Free CSS escape tool: turn any text into a valid CSS identifier or CSS string. Escape special characters for CSS selectors (class names, IDs, querySelector), fix leading digits and colons/dots, or escape quotes and newlines for content strings — following the exact rules of the JavaScript CSS.escape() function. 100% client-side, no signup, no uploads.
Live selector test
Proves the escaped identifier really works: the button runs querySelector() with your escaped output inside the sandbox below and highlights every match.
Live content preview
Proves the escaped string is valid CSS: it is injected into a real content rule and rendered below, exactly as a browser would display it.
How to escape CSS special characters
- Choose a mode. As identifier escapes text for use as a CSS class name, ID, or selector (the
CSS.escape()rules). As string escapes text for use inside a quoted CSS string such ascontent: "…". - Type or paste your text — or click one of the example chips. The output updates live as you type.
- Pick options. In identifier mode you can prepend a
#or.selector prefix; in string mode you can switch between double and single quotes. - Verify, then copy or download. Use the live selector test or the live content preview to prove the escaped result works, then copy it to your clipboard or download it as a
.txtfile.
When do you need to escape CSS?
querySelector with weird IDs
Framework-generated IDs often contain colons, dots, or brackets (user:name, form[0]). document.querySelector('#user:name') throws — escape it to #user\:name first.
Class names with dots
Utility frameworks and BEM variants can produce class names like foo.bar. In a selector the dot means "class", so you must escape dot in CSS class names: .foo\.bar.
IDs starting with digits
Database keys used as IDs (123abc) are illegal at the start of a CSS identifier. They become hex escapes: \31 23abc.
CSS content strings
Dynamic text injected via content: "…" must escape quotes, backslashes, and line breaks — otherwise the stylesheet breaks or renders wrong.
User-generated class names
Turning usernames, tags, or titles into class names? Escape first so a name like O'Brien & Sons can't break your stylesheet.
Testing & automation
E2E tests and scrapers that build selectors from arbitrary text (Puppeteer, Playwright, Selenium) need escaping to stay robust.
CSS.escape() rules this tool follows
- A leading digit is escaped as a hex code point:
5px→\35 px,123abc→\31 23abc. The trailing space ends the escape. - A digit after a leading hyphen is escaped the same way:
-5px→-\35 px. - A lone hyphen (
-) is escaped to\-;--xstays as-is. - Control characters (tab, newline, etc.) become hex escapes: tab →
\9, newline →\a. - NULL becomes the replacement character
�. - Everything else special (
# . : [ ] ( ) { } " ' \ / ! ? @ $ % ^ & * + = | ~ < > , ;and spaces) gets a single backslash:my id→my\ id. - Letters, digits (not first), hyphens, underscores, and non-ASCII characters pass through untouched:
café→café.
Special character reference
Every value in this table is computed live by the same escaping engine used above. Looking for a css escape online tool? This page covers everything people mean by escape css selector, css identifier escape, escape id selector, escape class name css, and css string escape — handling every css selector special characters case (colons, dots, brackets, quotes, spaces, and leading digits) for querySelector (css escape for queryselector), stylesheets, and CSS content strings.
| Character | Name | As identifier | As string |
|---|
Frequently asked questions
What does this CSS escape tool do?
It rewrites any text so it can be used safely inside CSS: as an identifier (class names, IDs, and selectors) or as a quoted string (for example in content: "..."). Special characters that would otherwise break your CSS — spaces, #, ., :, brackets, quotes, and leading digits — are converted to valid CSS escape sequences, following the same rules as the JavaScript CSS.escape() function.
How do I escape a CSS selector with special characters?
Type the raw ID or class name, keep "As identifier" mode selected, and copy the output. For example, my-id:guid becomes my-id\:guid. To select the element in JavaScript, use document.querySelector('#' + escaped) — the live selector test on this page proves the escaped selector actually matches.
What happens when my CSS identifier starts with a digit?
A CSS identifier may not begin with a digit, so the tool escapes the first digit as a hexadecimal code-point escape. For example, 123abc becomes \31 23abc: \31 is the hex code for the character "1", and the trailing space terminates the escape so the following "23abc" cannot merge into it. For the same reason, -5px becomes -\35 px.
How do I escape a colon or dot in an ID for querySelector()?
Colons and dots have special meaning in selectors (pseudo-classes and class selectors), so they must be backslash-escaped — this is the standard way to escape colons and dots in CSS selectors. An element with id="user:name" is selected with document.querySelector('#user\:name'), and class="foo.bar" with document.querySelector('.foo\.bar').
What is the difference between "As identifier" and "As string" modes?
Use "As identifier" for class names, IDs, and selectors — it applies the CSS.escape() rules (for example, Say "hi" becomes Say\ \"hi\"). Use "As string" for text that goes inside a quoted CSS string such as content: "..." — it escapes backslashes, the quote character, and newlines (Say "hi" becomes Say \"hi\"), and a line break becomes \a .
Why does the output contain escapes like \31 or \a ?
Those are hexadecimal code-point escapes: a backslash, the character's hex code, and a space terminator. \31 is the digit "1" (0x31), \a is a line feed (0x0A), and \9 is a tab. CSS needs this form for characters that cannot appear literally or would be ambiguous — for example, 5px becomes \35 px, because a leading digit is not allowed in an identifier.
How do I escape quotes and newlines for a CSS content string?
Switch to "As string" mode and choose your quote style. A double quote becomes \" inside double-quoted strings, a backslash becomes \, and a line break becomes \a — for example, a two-line value escapes to Line1\a Line2. The live content preview on this page renders your escaped string through a real CSS content rule so you can verify it.
Is this the same as the JavaScript CSS.escape() function?
Yes — "As identifier" mode implements the exact algorithm from the CSSOM specification that browsers use for CSS.escape(), including the leading-digit rule, the lone-hyphen rule, and NULL becoming the replacement character. The advantage of this tool: it also works in older browsers or environments where CSS.escape() is unavailable, and it adds the string-escaping mode that CSS.escape() does not cover.
Does this CSS escape tool upload my text to a server?
No. The entire tool runs 100% client-side in your browser with plain JavaScript — your text is never uploaded, stored, or sent anywhere. You can disconnect from the internet after the page loads and keep escaping.
Runs 100% in your browser — no servers, no tracking, no signup. Identifier escaping implements the CSSOM CSS.escape() algorithm.
Free tool by NRTechStudio