jQuery .selector Property

What You’ll Learn

The .selector property stored the CSS selector string originally passed to jQuery() when a collection was created. This tutorial covers reading it in jQuery 1.x/2.x, why it becomes unreliable after .find() and other traversal, the official plugin parameter pattern, and what to do in jQuery 3.0+ after the property was removed.

Introduction

When you write $("div.item"), jQuery parses the string "div.item", finds matching elements, and returns a collection object. In jQuery 1.x and 2.x, that collection also exposed .selector — the same string you typed — as read-only metadata.

That sounds convenient for plugins that need to know “which selector built this set.” The catch, documented by jQuery since deprecation in 1.7, is that traversal changes the elements without updating .selector to a trustworthy new query. After $("#menu").find("a"), the set holds anchor tags but .selector may still describe the old #menu selection.

jQuery 3.0 removed .selector entirely. The recommended fix — pass the selector string as an explicit plugin argument — works in every version and avoids silent bugs.

Understanding the .selector Property

.selector is a string property on jQuery collection instances. It reflects the selector argument to jQuery() at creation time — not a live description of the elements currently in the set after you chain .find(), .filter(), .add(), or .not().

If the collection was built from a DOM node ($(element)), HTML string, or function — without a CSS selector — .selector is typically an empty string.

📝 Syntax

Read the property on a jQuery collection (jQuery 1.3–2.x only):

jQueryCollection.selector

Related constructor form

The string you pass here may become .selector on the result:

jQuery( selector [, context ] )

Return value

• A String — the selector passed when the set was created.
• Empty string when no selector string was used (e.g. $(domNode)).
• Does not update to reflect elements after traversal methods.
• undefined in jQuery 3.0+ — the property was removed.

Official plugin pattern (still valid today)

$.fn.foo = function (selector, options) {
  /* plugin uses selector parameter — not this.selector */
};

$("div.bar").foo("div.bar", { dog: "bark" });

Examples Gallery

Examples 1–4 use jQuery 1.12.4 where .selector exists. Example 5 demonstrates the official plugin parameter pattern on jQuery 3.7.1. Reference: jQuery API — .selector.

var $items = $("div.item");

console.log($items.length);    // 2
console.log($items.selector);  // "div.item"
console.log(typeof $items.selector); // "string"

length: 2
selector: div.item
type: string

var sidebar = document.getElementById("sidebar");
var $tags = $(".tag", sidebar);

console.log($tags.length);       // 2 (inside sidebar only)
console.log($tags.selector);     // ".tag"
console.log($tags.context.id);   // "sidebar"

match count: 2
selector string: .tag
context id: sidebar

var $menu = $("#menu");
var $links = $menu.find("a");

console.log($menu.selector);  // "#menu" — OK
console.log($links.selector); // may still be "#menu" or stale
console.log($links.length);   // 2 — but these are <a> elements

After $("#menu"):
  selector: #menu
  length: 1

After .find("a"):
  selector: #menu  (stale!)
  length: 2

var el = document.getElementById("box");

console.log($("#box").selector);  // "#box"
console.log($(el).selector);      // "" (empty string)

From $("#box"):
  selector: "#box"

From jQuery(el):
  selector: ""

$.fn.highlightBar = function (selector, options) {
  var color = (options && options.color) || "#fef08a";
  return this.filter(selector).css("background-color", color);
};

$("div.bar").highlightBar("div.bar", { color: "#bbf7d0" });
// Repeat "div.bar" explicitly — do not read this.selector

Plugin received selector: "div.bar"
.selector in jQuery 3.x: undefined (removed)
Both bars highlighted

🚀 When You Might Encounter .selector

• Legacy jQuery plugins — code written before 1.7 that read this.selector inside $.fn methods.
• Debugging old codebases — log creation-time metadata during jQuery 2.x → 3.x upgrades.
• Understanding deprecation warnings — jQuery Migrate may flag .selector access.
• Teaching collection internals — contrast metadata with live DOM state after traversal.
• Writing new plugins — use explicit parameters instead (official recommendation).
• Not for re-querying — never treat .selector as the current set’s query.

📝 Notes

• Added in jQuery 1.3; deprecated in jQuery 1.7; removed in jQuery 3.0.
• Official docs: never a reliable indicator of the current set after traversal.
• Related removed property: .context — the DOM search root.
• Related still-available property: .length — number of matched elements.
• Empty when collection created from DOM node, HTML string, or function — no selector arg.
• Plugin fix from jQuery docs: $.fn.foo = function(selector, options) { ... }.
• jQuery Migrate can help locate legacy .selector usage during upgrades.

💡 Best Practices