jQuery.escapeSelector() Method

What Is jQuery.escapeSelector()?

jQuery.escapeSelector(selector) (alias $.escapeSelector) escapes characters that have special meaning in CSS so you can use them as literal class or ID text (since jQuery 3.0).

$.escapeSelector("#target")  // "\#target"
"." + $.escapeSelector(".box")  // ".\.box"

// Still prepend . or # yourself — escape only the name.

How to Use jQuery.escapeSelector()

Escape the identifier, then build the full selector string.

1. Start with a class or ID string that may contain CSS punctuation.
2. Call $.escapeSelector(name) to escape special characters.
3. Prepend "." or "#" to form a complete selector.
4. Pass that string to $(), .find(), or another selector API.

Pseudocode

function escapeSelector(text):
    for each character in text:
        if character is special in CSS:
            prefix it with a backslash
    return escapedText

selector = "." + escapeSelector(className)
elements = $(selector)

Cheat Sheet

Keep these facts handy when building dynamic selectors.

Live Preview

Pick a sample name and see the escaped string plus a ready-to-use selector.

input → #target
escaped → \#target
ID selector → #\#target

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

console.log($.escapeSelector("#target"));
// "\#target"

\#target

// HTML: <div><span class=".box">ok</span></div>
var $hit = $("div").find("." + $.escapeSelector(".box"));
console.log($hit.text());  // "ok"

ok

// HTML: <p id="#target">found</p>
var sel = "#" + $.escapeSelector("#target");
console.log($(sel).text());  // "found"

found

// HTML: <span class="btn:primary">go</span>
var name = "btn:primary";
var $el = $("." + $.escapeSelector(name));
console.log($el.text());  // "go"

go

Performance Notes

Escaping is cheap compared to DOM queries. Escape once when you build the selector; reuse the resulting string if you query repeatedly.

Key Takeaways