Why would a class or ID name need escaping?

CSS identifiers can't start with a digit, and characters like spaces, #, (, ), or : have special meaning in selectors. If a class name comes from user input, a filename, or a CMS field and might contain those characters, escaping each unsafe character with a backslash (the same rules the CSS.escape() API implements) makes it safe to use literally in a selector like .my\ class.

How is escaping a string literal different from escaping an identifier?

A CSS string (used in content:, url("..."), or an attribute selector like [data-x="..."]) only needs its own quote character and backslashes escaped, plus control characters replaced with their hex escape. Identifier escaping is stricter because far more characters are special in a bare selector than inside quotes.

Does this use a real browser API or a reimplementation?

Identifier mode calls the browser's native CSS.escape() function directly, so the output exactly matches what a browser would produce and stays correct as the CSSOM spec evolves — no separate implementation to keep in sync.

When would I need this instead of just quoting the whole selector?

CSS class and ID selectors can't be wrapped in quotes the way attribute values can — .some\ class is valid, but ."some class" is not. Escaping the specific unsafe characters is the only way to reference an oddly-named class or ID directly in a stylesheet or querySelector call.

Does this tool send my input anywhere?

No — escaping happens locally in your browser using the native CSS.escape() function or straightforward string logic. Nothing is uploaded to a server.

CSS ESCAPE GENERATOR

Escape text for a safe CSS identifier or string literal, using the browser's native CSS.escape().

In short

Escape a string for safe use as a CSS class or ID selector, or inside a quoted CSS string like content: "...". Uses the browser's native CSS.escape() for identifiers. Runs entirely in your browser.

Raw class / id name

Escaped selector

my\ class\ \#1\ \(mobile\)

Usage preview

.my\ class\ \#1\ \(mobile\) { }

How to escape a CSS identifier or string

1
Choose what you're escaping: an identifier (a class or ID name) or a string literal (like a content: value).
2
Type or paste the raw text — spaces, punctuation, or a leading digit are all fine.
3
Read the escaped output, safe to drop straight into a selector or CSS string.
4
Check the usage preview to see it in context.
5
Copy the escaped value.

Questions

Why would a class or ID name need escaping?: CSS identifiers can't start with a digit, and characters like spaces, #, (, ), or : have special meaning in selectors. If a class name comes from user input, a filename, or a CMS field and might contain those characters, escaping each unsafe character with a backslash (the same rules the CSS.escape() API implements) makes it safe to use literally in a selector like .my\ class.
How is escaping a string literal different from escaping an identifier?: A CSS string (used in content:, url("..."), or an attribute selector like [data-x="..."]) only needs its own quote character and backslashes escaped, plus control characters replaced with their hex escape. Identifier escaping is stricter because far more characters are special in a bare selector than inside quotes.
Does this use a real browser API or a reimplementation?: Identifier mode calls the browser's native CSS.escape() function directly, so the output exactly matches what a browser would produce and stays correct as the CSSOM spec evolves — no separate implementation to keep in sync.
When would I need this instead of just quoting the whole selector?: CSS class and ID selectors can't be wrapped in quotes the way attribute values can — .some\ class is valid, but ."some class" is not. Escaping the specific unsafe characters is the only way to reference an oddly-named class or ID directly in a stylesheet or querySelector call.
Does this tool send my input anywhere?: No — escaping happens locally in your browser using the native CSS.escape() function or straightforward string logic. Nothing is uploaded to a server.

Related tools

All Developer Tools →

Updated September 10, 2026