CSS Escape Generator

How to use the css escape generator

1. Paste the identifier.
2. Copy the escaped version.
3. Use it in your selector.

About this tool

CSS identifiers are more restricted than HTML id and class attributes, which is the source of the problem. HTML happily accepts an id of <code>1st.item</code>; CSS reads the digit, the full stop and everything after as syntax rather than as a name, so the selector silently matches nothing.

Escaping fixes it. A leading digit becomes a hex code point followed by a space — which is why the output can look strange but is correct, and why removing that trailing space breaks it. Punctuation is escaped with a backslash.

The result here is checked against the browser's own selector parser rather than merely produced, so the page can say it is valid rather than assume it.

Modern browsers provide <code>CSS.escape()</code>, which does exactly this in code and should be preferred there. This page is for the times you are writing a stylesheet by hand.

Common uses

• Selecting an element whose id starts with a digit.
• Writing a selector for a class containing a colon or slash.
• Escaping generated identifiers from a CMS.

Frequently asked questions

Why is a leading digit escaped so strangely?

CSS requires a hex code point followed by a space. The trailing space is part of the escape and must not be removed.

Should I use this or CSS.escape?

CSS.escape in code — it is built in and always correct. This page is for hand-written stylesheets and one-off checks.

Why does my selector match nothing?

Usually an unescaped dot or a leading digit. CSS reads those as syntax rather than as part of the name.