Generate W3C CSS.escape() compliant selectors for complex class names (Tailwind, colons, slashes), IDs starting with numbers, and CSS content strings.
Loading tool engine...
Conforms to W3C CSS Syntax Level 3. Use in querySelector('#' + id) or .class
Escapes colons, brackets, slashes, and periods for stylesheet rule definitions
Safe for pseudo-element content: '\XXXX' rules without encoding issues
In CSS and querySelector, characters such as colons (:), periods (.), hashes (#), and brackets ([]) have special grammatical meaning (pseudo-classes, class selectors, ID selectors, and attribute selectors). When utility-first frameworks like Tailwind use class names like sm:hover:bg-red-500, trying to select them with document.querySelector(".sm:hover:bg-red-500") throws a DOMException error unless escaped as .sm\\:hover\\:bg-red-500.