CSS Escape Tool

Escape special characters in CSS selectors and property values for safe usage

CSS PRO

Escape Mode

Escaped Result

Why CSS strings need escaping

CSS identifiers can only contain letters, digits, hyphens and underscores, and they cannot begin with a digit. Real-world class names and IDs often break those rules, for example an ID generated as 123.456 or a class such as w-1/2 from a utility framework. To select them, each troublesome character has to be preceded by a backslash or written as a code point. This tool does that for you, so your selector works in a stylesheet or in document.querySelector.

Escaping a value

Type or paste your text into Raw String / Selector. The Paste button reads from your clipboard, Sample loads an example with a class name, an ID and an attribute containing symbols, and Clear resets the tool.
Leave the Escape Mode menu on its default, or choose between the selector and identifier options.
Click Escape CSS String.
Read the outcome in the Escaped Result box and press Copy to take it away.

How the conversion works

The tool calls the standard CSS.escape function built into modern browsers. If a browser lacks it, a simple fallback adds a backslash before any character that is not a letter, digit, hyphen or underscore. With the built-in function, a leading digit is also converted to a hex escape, because a bare digit at the start of an identifier is not valid CSS.

Realistic situations

Selecting an element whose ID contains dots, colons or brackets, such as one generated by a form library.
Using Tailwind-style class names containing slashes, colons or percent signs in a hand-written selector.
Building dynamic selectors in JavaScript from user-supplied or database-supplied values without breaking the query.
Debugging why a selector throws a syntax error in querySelector or fails silently in a stylesheet.

Important limitation

CSS.escape is designed for a single identifier, not for a complete selector. If you paste a whole selector, every special character in it is escaped, including the leading dot of a class or the hash of an ID, and the result will no longer match anything. Paste only the name itself, such as my-class or 123.456, and add the dot or hash yourself afterwards.

Both Escape Mode choices currently produce the same result, since the tool runs the same function either way. Also note that this is escaping for CSS, not for HTML or URLs, so it will not protect a string you place into markup. The conversion runs in the browser as JavaScript.

Related Tools

Frequently Asked Questions

Should I paste a whole selector or just the name?

Paste only the identifier, such as a class or ID without its leading dot or hash. The tool escapes every special character it sees, so a full selector would have its own dot or hash escaped too.

What does the escaped result look like?

Problem characters get a backslash in front of them, and a leading digit is written as a hex code point followed by a space. The result can be used directly in a stylesheet or querySelector call.

What is the difference between the two Escape Mode options?

At present there is no difference in the output. Both options run the same standard CSS.escape conversion, so you will get identical results whichever one is selected in the menu.

Does it work in every browser?

Modern browsers include CSS.escape and the tool uses it. In a browser without it, a fallback adds a backslash before any character that is not a letter, digit, hyphen or underscore.

Is this the same as escaping for HTML or URLs?

No. It only prepares text to be used as a CSS identifier. Text going into HTML markup or a web address needs different escaping rules, and a different tool, so do not rely on this one for those.