jQuery :target Selector

What Is :target?

:target selects the element indicated by the fragment identifier (hash) in the document URI. Official docs: for https://example.com/#foo, $("p:target") selects the <p id="foo"> element.

URL: https://example.com/page#foo

$(":target")     → element with id="foo"
$("p:target")    → only if that element is a <p> (official style)
$("#foo")        → always finds #foo (hash does not matter)

// No hash → $(":target").length === 0

How to Use :target

Give sections stable ids, link with #id, then style or read the current :target.

1. Add an id to the element you want deep-linked (for example id="intro").
2. Link to it with href="#intro" (or set location.hash).
3. Query with $(":target") or a scoped form like $("section:target").
4. Re-run the query on hashchange if you highlight with jQuery (CSS :target updates alone).
5. Handle the empty case when the URL has no fragment.

Pseudocode

hash = URL fragment without "#"
if hash is empty:
    return empty set

target = element whose id == hash
if not found:
    return empty set

return jQuery(target)

// Optional: filter by tag → p:target, section:target, …

Cheat Sheet

Keep these facts handy while working with URL fragments.

Live Preview

Jump to a section id below. The preview reads $(":target") for this page’s current hash.

hash: (none)
$(":target").length → 0

/* no fragment → empty set */

jQuery Examples

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

location.hash = "foo";
var $t = $(":target");
$("#out").text(
  "id: " + ($t.attr("id") || "(none)") + "\\n" +
  "text: " + ($t.text() || "(empty)")
);

id: foo
text: Hello target

location.hash = "";
console.log("no hash — :target", $(":target").length);
console.log("no hash — #foo", $("#foo").length);

location.hash = "foo";
console.log("with #foo — :target", $(":target").length);
console.log("with #foo — #foo", $("#foo").length);

no hash — :target 0
no hash — #foo 1
with #foo — :target 1
with #foo — #foo 1

location.hash = "foo";
console.log("p:target →", $("p:target").length);
console.log("div:target →", $("div:target").length);

p:target → 1
div:target → 0
(Target element is a paragraph)

function showTarget() {
  var $t = $(":target");
  $("#out").text($t.length ? "Active: #" + $t.attr("id") : "No target");
}
$(window).on("hashchange", showTarget);
showTarget();

Click #one → Active: #one
Click #two → Active: #two

location.hash = "";
if ($(":target").length === 0) {
  $("#out").text("No fragment — nothing is :target");
} else {
  $("#out").text("Target: #" + $(":target").attr("id"));
}

No fragment — nothing is :target

Performance Notes

Because :target is standard CSS, jQuery can use the browser’s native engine. Cost is negligible — you resolve at most one element.

Key Takeaways